ComponentOne Xamarin Edition
Quick Start: Add data to FlexGrid using CollectionView
Controls > CollectionView > Quick Start: Add data to FlexGrid using CollectionView

This section describes how to add a FlexGrid control to your Xamarin application and add data to it using the CollectionView class. For more information on how to add Xamarin components in XAML, see Adding XamarinComponents using XAML.

This topic comprises of three steps:

The following image shows how the FlexGrid control appears after completing the steps above.

Step 1: Create a data source for FlexGrid

  1. Add a new class file to the Xamarin.Forms application (Name: Customer.cs).
  2. Add the following code to the Customer.cs file. We are using Customer class to represent data in the FlexGrid control.
    Customer.cs
    Copy Code 
    public class Customer
    {
        int _id, _countryID;
        string _first, _last, _address, _postalCode, _email;        
        static Random _rnd = new Random();
        static string[] _firstNames = "Gil|Oprah|Xavier|Herb|Charlie|Larry|Steve".Split('|');
        static string[] _lastNames = "Orsted|Frommer|Jammers|Krause|Neiman".Split('|');
        static string[] _countries = "Brazil|Colombia|Egypt|United States|Japan|Thailand".Split('|');

        static string[] _emailServers = "gmail|yahoo|outlook|aol".Split('|');
        static string[] _streetNames = "Main|Broad|Grand|Panoramic|Green|Golden|Park|Fake".Split('|');
        static string[] _streetTypes = "ST|AVE|BLVD".Split('|');
        static string[] _streetOrientation = "S|N|W|E|SE|SW|NE|NW".Split('|');

        public Customer()
            : this(_rnd.Next(10000))
        {
        }
        public Customer(int id)
        {
            ID = id;
            First = GetString(_firstNames);
            Last = GetString(_lastNames);
            Address = GetRandomAddress();
            PostalCode = _rnd.Next(100000, 999999).ToString();
            CountryID = _rnd.Next() % _countries.Length;
            Email = string.Format("{0}@{1}.com", (First + Last.Substring(0, _rnd.Next(1, Last.Length)).ToLower()), GetString(_emailServers));
        }
        public int ID
        {
            get { return _id; }
            set
            {
                if (value != _id)
                {
                    _id = value;
                }
            }
        }
        public string Name
        {
            get { return string.Format("{0} {1}", First, Last); }
        }

        public string Address
        {
            get { return _address; }
            set
            {
                if (value != _address)
                {
                    _address = value;
                }
            }
        }
        public string Country
        {
            get { return _countries[_countryID]; }
            set { _countries[_countryID] = value; }
        }

        public int CountryID
        {
            get { return _countryID; }
            set
            {
                if (value != _countryID)
                {
                    _countryID = value;
                }
            }
        }
        public string PostalCode
        {
            get { return _postalCode; }
            set
            {
                if (_postalCode != value)
                {
                    _postalCode = value;
                }
            }
        }
        public string First
        {
            get { return _first; }
            set
            {
                {
                    _first = value;
                }
            }
        }

        public string Last
        {
            get { return _last; }
            set
            {
                if (_last != value)
                {
                    _last = value;
                }
            }
        }
        public string Email
        {
            get { return _email; }
            set
            {
                {
                    _email = value;
                }
            }
        }

        static string GetString(string[] arr)
        {
            return arr[_rnd.Next(arr.Length)];
        }
        // Provide static list.
        public static ObservableCollection<Customer> GetCustomerList(int count)
        {
            var list = new ObservableCollection<Customer>();
            for (int i = 0; i < count; i++)
            {
                list.Add(new Customer(i));
            }
            return list;
        }
        private static string GetRandomAddress()
        {
            if (_rnd.NextDouble() > 0.9)
            {
                return string.Format("{0} {1} {2} {3}", _rnd.Next(1, 999), GetString(_streetNames), GetString(_streetTypes), GetString(_streetOrientation));
            }
            else
            {
                return string.Format("{0} {1} {2}", _rnd.Next(1, 999), GetString(_streetNames), GetString(_streetTypes));
            }
        }
    }
Back to Top

Step 2: Add FlexGrid control

Complete the following steps to initialize a FlexGrid control in XAML.

In XAML

  1. Add a new content page (Name: QuickStart.xaml) to your .NET Standard or shared project and include references as shown below.

    XAML
    Copy Code 
    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:c1="clr-namespace:C1.Xamarin.Forms.Grid;assembly=C1.Xamarin.Forms.Grid"
             x:Class="CollectionViewXamarin.QuickStart">
</ContentPage>

  2. Initialize a FlexGrid control by adding the markup for the control between the <ContentPage> </ContentPage> tags, as shown below.

    XAML
    Copy Code 
    <c1:FlexGrid x:Name="grid" ShowMarquee="True" SelectionMode="Cell"/>

  3. Add the following references in the QuickStart.xaml.cs file.

    C#
    Copy Code 
    using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using C1.CollectionView;
using C1.Xamarin.Forms.Grid;

  4. Add the following code in the QuickStart.xaml.cs file to create an instance of C1CollectionView class and set the ItemSource property of the FlexGrid control to CollectionView.

    C#
    Copy Code 
    namespace CollectionViewXamarin
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class QuickStart : ContentPage
        {
        public C1CollectionView<Customer> MyCollectionView { get; set; }
        public FlexGrid()
                {
            InitializeComponent();
            MyCollectionView = new C1CollectionView<Customer>(Customer.GetCustomerList(250));
            grid.ItemsSource = MyCollectionView;
            grid.RowHeaders.Columns.Clear();
            grid.AutoSizeColumns(0, grid.Columns.Count - 1);
            grid.AllowDragging = GridAllowDragging.None;
        }
    }
}

Step 3: Run the Project

  1. In the Solution Explorer, double click App.xaml.cs to open it.
  2. Complete the following steps to display the FlexGrid control.
    • To return a Content Page: In the class constructor App(), set the Forms XAML Page QuickStart as the MainPage.

      The following code shows the class constructor App() after completing this step.

      C#
      Copy Code 
      public App()
{
    // The root page of your application
    MainPage = new QuickStart();
}
  3. Some additional steps are required to run the iOS and UWP apps:
    • iOS App:
      1. In the Solution Explorer, double click AppDelegate.cs inside YourAppName.iOS project, to open it.
      2. Add the following code to the FinishedLaunching() method.
        C#
        Copy Code 
        C1.Xamarin.Forms.Chart.Platform.iOS.FlexGridRenderer.Init();
    • UWP App:
      1. In the Solution Explorer, expand MainPage.xaml.
      2. Double click MainPage.xaml.cs to open it.
      3. Add the following code to the class constructor.
        C#
        Copy Code 
        C1.Xamarin.Forms.Chart.Platform.UWP.FlexGridRenderer.Init();

      4. (Optional) In case you compile your UWP application in Release mode, you need to explicitly add the following code to the OnLaunched method in your App.xaml.cs to include the correct assemblies within your application.

        C#
        Copy Code 
        var assembliesToInclude = new List<Assembly>();
assembliesToInclude.Add(typeof(C1.Xamarin.Forms.Grid.Platform.UWP.FlexGridRenderer)
.GetTypeInfo().Assembly);
assembliesToInclude.Add(typeof(C1.UWP.Grid.FlexGrid).GetTypeInfo().Assembly);
Xamarin.Forms.Forms.Init(e, assembliesToInclude);
  4. Press F5 to run the project.
Back to Top

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page