ComponentOne FlexGrid for UWP
Tutorials / Populating the Grid with Data / Grid Population
In This Topic
    Grid Population
    In This Topic

    This help will walk you through populating the grid by binding data from a separate code file. It will also demonstrate the C1FlexGrid control's filtering and grouping capabilities.
    Follow these steps:

    1. Open the MainPage.xaml page if it isn't open already. Click within the <Grid> </Grid> tags and insert the following XAML markup to set up the general ComboBox and TextBox controls that will control both filtering and grouping:
      XAML
      Copy Code 
      <Grid>
       <Grid.RowDefinitions>
           <RowDefinition Height="Auto"/>
           <RowDefinition Height="Auto"/>
           <RowDefinition />
       </Grid.RowDefinitions>
       <Border BorderThickness="0,1,0,1" BorderBrush="White" Margin="5">
           <StackPanel Orientation="Horizontal">
               <StackPanel.Resources>
                   <Style TargetType="TextBlock">
                       <Setter Property="FontSize" Value="14"/>
                       <Setter Property="Margin" Value="10,0,6,0"/>
                       <Setter Property="VerticalAlignment" Value="Center"/>
                   </Style>
               </StackPanel.Resources>
               <TextBlock Text="Group on:" HorizontalAlignment="Right"/>
               <ComboBox Name="groupComboBox" Grid.Column="1" 
                                        SelectionChanged="groupComboBox_SelectionChanged_1" Height="30" Width="110" Margin="5"/>
               <TextBlock Text="Filter on:" Grid.Row="1" HorizontalAlignment="Right"/>
               <ComboBox Name="filterComboBox" Grid.Row="1" Grid.Column="1" 
                                        SelectionChanged="filterComboBox_SelectionChanged_1" Height="30" Width="110" Margin="5"/>
               <TextBox Name="filterTextBox" Grid.Row="1" Grid.Column="2" TextChanged="filterTextBox_TextChanged_1" Height="25"
                            Width="110" Margin="5"/>
           </StackPanel>
       </Border>

    2. Add a C1FlexGrid control to your application by double-clicking the control in your Visual Studio Toolbox or by adding the following XAML markup to your application:
      XAML
      Copy Code 
      <FlexGrid:C1FlexGrid x:Name="flexgrid1" AllowResizing="Both" AllowDragging="Both" AllowDrop="True" ColumnHeaderForeground="White" />

    3. Add the following XAML markup to your <FlexGrid:C1FlexGrid> </FlexGrid: C1FlexGrid> tags to set up the FlexGrid.Columns and to create the bindings in markup:
      XAML
      Copy Code 
      <FlexGrid:C1FlexGrid.Columns>
    <FlexGrid:Column Binding="{Binding Active, Mode=TwoWay}" />
    <FlexGrid:Column Binding="{Binding ID, Mode=TwoWay}" />
    <FlexGrid:Column Binding="{Binding Name, Mode=TwoWay}" Width="*"/>
    <FlexGrid:Column Binding="{Binding Country, Mode=TwoWay}" Width="*"/>
    <FlexGrid:Column Binding="{Binding Hired, Mode=TwoWay}" Format="d" Width="*" />
    <FlexGrid:Column Binding="{Binding Father, Mode=TwoWay}" Width="*"/>
    <FlexGrid:Column Binding="{Binding Weight, Mode=TwoWay}" Width="*"/>
 </FlexGrid:C1FlexGrid.Columns>

    4. Right-click on your application name and select Add | New Item from the list. Select Code File from the Add New File dialog box and name it Customer.cs. The new code file should open immediately.
    5. In the Customer.cs file, add the following namespaces and code to create the data with which we will populate the grid:
      C#
      Copy Code 
      using System;
 using System.Collections;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.ComponentModel;
 using System.Reflection;
namespace FlexGridSamples
 {
         public class Customer :
         INotifyPropertyChanged,
         IEditableObject
     {
         // ** fields
         int _id, _countryID;
         string _first, _last;
         string _father, _brother, _cousin;
         bool _active;
         DateTime _hired;
         double _weight;
        // ** data generators
         static Random _rnd = new Random();
         static string[] _firstNames = "Andy|Ben|Charlie|Dan|Ed|Fred|Gil|Herb|Jack|Karl|Larry|Mark| Noah|Oprah|Paul|Quince|Rich|Steve|Ted|Ulrich|Vic|Xavier|Zeb".Split('|');
         static string[] _lastNames = "Ambers|Bishop|Cole|Danson|Evers|Frommer|Griswold|Heath|Jammers|Krause|Lehman|Myers|Neiman| Orsted|Paulson|Quaid|Richards|Stevens|Trask|Ulam".Split('|');
         static string[] _countries = "China|India|United States|Indonesia|Brazil|Pakistan|Bangladesh|Nigeria|Russia|Japan|Mexico|Philippines |Vietnam|Germany|Ethiopia|Egypt|Iran|Turkey|Congo|France|Thailand|UnitedKingdom| Italy|Myanmar".Split('|');
        // ** ctors
         public Customer()
             : this(_rnd.Next(10000))
         {
         }
         public Customer(int id)
         {
             ID = id;
            First = GetString(_firstNames);
             Last = GetString(_lastNames);
             CountryID = _rnd.Next() % _countries.Length;
             Active = _rnd.NextDouble() >= .5;
             Hired = DateTime.Today.AddDays(-_rnd.Next(1, 365));
             Weight = 50 + _rnd.NextDouble() * 50;
             _father = string.Format("{0} {1}", GetString(_firstNames), Last);
             _brother = string.Format("{0} {1}", GetString(_firstNames), Last);
             _cousin = GetName();
         }
        // ** object model
        public int ID
         {
             get { return _id; }
            set
             {
                 if (value != _id)
                {
                     _id = value;
                     RaisePropertyChanged("ID");
                 }
             }
         }
         public string Name
         {
             get { return string.Format("{0} {1}", First, Last); }
         }
         public string Country
         {
             get { return _countries[_countryID]; }
         }
         public int CountryID
        {
             get { return _countryID; }
             set
             {
                 if (value != _countryID && value > -1 && value < _countries.Length)
                 {
                     _countryID = value;
                    // call OnPropertyChanged with null parameter since setting this property
                     // modifies the value of "CountryID" and also the value of "Country".
                     RaisePropertyChanged("");
                 }
             }
         }
         public bool Active
         {
             get { return _active; }
             set
             {
                 if (value != _active)
                 {
                     _active = value;
                     RaisePropertyChanged("Active");
                 }
             }
         }
         public string First
         {
             get { return _first; }
             set
             {
                 if (value != _first)
                 {
                     _first = value;
                    // call OnPropertyChanged with null parameter since setting this property
                     // modifies the value of "First" and also the value of "Name".
                     RaisePropertyChanged("");
                 }
             }
         }
         public string Last
         {
             get { return _last; }
             set
             {
                 if (value != _last)
                 {
                     _last = value;
                    // call OnPropertyChanged with null parameter since setting this property
                     // modifies the value of "First" and also the value of "Name".
                     RaisePropertyChanged("");
                 }
             }
         }
         public DateTime Hired
         {
             get { return _hired; }
             set
             {
                 if (value != _hired)
                 {
                     _hired = value;
                     RaisePropertyChanged("Hired");
                 }
             }
         }
         public double Weight
         {
             get { return _weight; }
             set
             {
                 if (value != _weight)
                 {
                     _weight = value;
                     RaisePropertyChanged("Weight");
                 }
             }
         }
        // some read-only stuff
         public string Father
         {
             get { return _father; }
         }
         public string Brother
         {
             get { return _brother; }
         }
         public string Cousin
         {
             get { return _cousin; }
         }
        // ** utilities
         static string GetString(string[] arr)
         {
             return arr[_rnd.Next(arr.Length)];
         }
         static string GetName()
         {
             return string.Format("{0} {1}", GetString(_firstNames), GetString(_lastNames));
         }
        // ** static list provider
         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;
         }
        // ** static value providers
         public static string[] GetCountries() { return _countries; }
         public static string[] GetFirstNames() { return _firstNames; }
         public static string[] GetLastNames() { return _lastNames; }
         #region ** INotifyPropertyChanged Members
        // this interface allows bounds controls to react to changes in the data objects.
        void RaisePropertyChanged(string propertyName)
         {
             OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
         }
         public event PropertyChangedEventHandler PropertyChanged;
         protected void OnPropertyChanged(PropertyChangedEventArgs e)
         {
             if (PropertyChanged != null)
                 PropertyChanged(this, e);
         }
        #endregion
                #region IEditableObject Members
        // this interface allows transacted edits (user can press escape to restore previous values).
        Customer _clone;
         public void BeginEdit()
         {
             _clone = (Customer)this.MemberwiseClone();
         }
         public void EndEdit()
         {
             _clone = null;
         }
         public void CancelEdit()
         {
             if (_clone != null)
             {
                 foreach (var p in this.GetType().GetRuntimeProperties())
                 {
                     if (p.CanRead && p.CanWrite)
                     {
                         p.SetValue(this, p.GetValue(_clone, null), null);
                     }
                 }
             }
         }
        #endregion
     }
 }
      Visual Basic
      Copy Code 
      Visual Basic
 Imports System
 Imports System.Collections
 Imports System.Collections.Generic
 Imports System.Collections.ObjectModel
 Imports System.ComponentModel
 Imports System.Reflection
Namespace FlexGridSamples
     Public Class Customer
        Implements INotifyPropertyChanged
         Implements IEditableObject
         ' ** fields
         Private _id As Integer, _countryID As Integer
         Private _first As String, _last As String
         Private _father As String, _brother As String, _cousin As String
         Private _active As Boolean
         Private _hired As DateTime
         Private _weight As Double
        ' ** data generators
         Shared _rnd As New Random()
         Shared _firstNames As String() = "Andy|Ben|Charlie|Dan|Ed|Fred|Gil|Herb|Jack|Karl|Larry| Mark|Noah|Oprah|Paul|Quince|Rich|Steve|Ted|Ulrich|Vic|Xavier|Zeb".Split("|"c)
         Shared _lastNames As String() = "Ambers|Bishop|Cole|Danson|Evers|Frommer|Griswold|Heath|Jammers|Krause|Lehman|Myers |Neiman|Orsted|Paulson|Quaid|Richards|Stevens|Trask|Ulam".Split("|"c)
         Shared _countries As String() = "China|India|United States|Indonesia|Brazil|Pakistan|Bangladesh|Nigeria|Russia|Japan|Mexico| Philippines|Vietnam|Germany|Ethiopia|Egypt|Iran|Turkey|Congo|France|Thailand|United Kingdom|Italy|Myanmar".Split("|"c)
        ' ** ctors
         Public Sub New()
             Me.New(_rnd.[Next](10000))
         End Sub
         Public Sub New(id__1 As Integer)
             ID = id__1
            First = GetString(_firstNames)
             Last = GetString(_lastNames)
             CountryID = _rnd.[Next]() Mod _countries.Length
             Active = _rnd.NextDouble() >= 0.5
             Hired = DateTime.Today.AddDays(-_rnd.[Next](1, 365))
             Weight = 50 + _rnd.NextDouble() * 50
             _father = String.Format("{0} {1}", GetString(_firstNames), Last)
             _brother = String.Format("{0} {1}", GetString(_firstNames), Last)
             _cousin = GetName()
         End Sub
        ' ** object model
         Public Property ID() As Integer
             Get
                 Return _id
             End Get
             Set(value As Integer)
                 If value <> _id Then
                     _id = value
                     RaisePropertyChanged("ID")
                 End If
             End Set
         End Property
         Public ReadOnly Property Name() As String
             Get
                 Return String.Format("{0} {1}", First, Last)
             End Get
         End Property
         Public ReadOnly Property Country() As String
             Get
                 Return _countries(_countryID)
             End Get
         End Property
         Public Property CountryID() As Integer
             Get
                 Return _countryID
             End Get
             Set(value As Integer)
                 If value <> _countryID AndAlso value > -1 AndAlso value < _countries.Length Then
                     _countryID = value
                    ' call OnPropertyChanged with null parameter since setting this property
                     ' modifies the value of "CountryID" and also the value of "Country".
                     RaisePropertyChanged("")
                 End If
             End Set
         End Property
         Public Property Active() As Boolean
             Get
                 Return _active
             End Get
             Set(value As Boolean)
                 If value <> _active Then
                     _active = value
                     RaisePropertyChanged("Active")
                 End If
             End Set
         End Property
         Public Property First() As String
             Get
                 Return _first
             End Get
             Set(value As String)
                 If value <> _first Then
                     _first = value
                    ' call OnPropertyChanged with null parameter since setting this property
                     ' modifies the value of "First" and also the value of "Name".
                     RaisePropertyChanged("")
                 End If
             End Set
         End Property
         Public Property Last() As String
             Get
                 Return _last
             End Get
             Set(value As String)
                 If value <> _last Then
                     _last = value
                    ' call OnPropertyChanged with null parameter since setting this property
                     ' modifies the value of "First" and also the value of "Name".
                     RaisePropertyChanged("")
                 End If
             End Set
        End Property
         Public Property Hired() As DateTime
             Get
                 Return _hired
             End Get
             Set(value As DateTime)
                 If value <> _hired Then
                     _hired = value
                     RaisePropertyChanged("Hired")
                 End If
             End Set
         End Property
         Public Property Weight() As Double
             Get
                 Return _weight
             End Get
             Set(value As Double)
                 If value <> _weight Then
                     _weight = value
                     RaisePropertyChanged("Weight")
                 End If
             End Set
         End Property
        ' some read-only stuff
         Public ReadOnly Property Father() As String
             Get
                 Return _father
             End Get
         End Property
         Public ReadOnly Property Brother() As String
             Get
                 Return _brother
             End Get
         End Property
         Public ReadOnly Property Cousin() As String
             Get
                 Return _cousin
             End Get
         End Property
        ' ** utilities
         Private Shared Function GetString(arr As String()) As String
             Return arr(_rnd.[Next](arr.Length))
         End Function
         Private Shared Function GetName() As String
             Return String.Format("{0} {1}", GetString(_firstNames), GetString(_lastNames))
         End Function
        ' ** static list provider
         Public Shared Function GetCustomerList(count As Integer) As ObservableCollection(Of Customer)
             Dim list = New ObservableCollection(Of Customer)()
             For i As Integer = 0 To count - 1
                 list.Add(New Customer(i))
             Next
             Return list
         End Function
        ' ** static value providers
         Public Shared Function GetCountries() As String()
             Return _countries
         End Function
         Public Shared Function GetFirstNames() As String()
             Return _firstNames
         End Function
         Public Shared Function GetLastNames() As String()
             Return _lastNames
         End Function
 #Region "** INotifyPropertyChanged Members"
        ' this interface allows bounds controls to react to changes in the data objects.
        Private Sub RaisePropertyChanged(propertyName As String)
             OnPropertyChanged(New PropertyChangedEventArgs(propertyName))
         End Sub
         Public Event PropertyChanged As PropertyChangedEventHandler
         Protected Sub OnPropertyChanged(e As PropertyChangedEventArgs)
             RaiseEvent PropertyChanged(Me, e)
         End Sub
#End Region      
 #Region "IEditableObject Members"
        ' this interface allows transacted edits (user can press escape to restore previous values).
        Private _clone As Customer
         Public Sub BeginEdit()
             _clone = DirectCast(Me.MemberwiseClone(), Customer)
         End Sub
         Public Sub EndEdit()
             _clone = Nothing
         End Sub
         Public Sub CancelEdit()
             If _clone IsNot Nothing Then
                 For Each p In Me.[GetType]().GetRuntimeProperties()
                     If p.CanRead AndAlso p.CanWrite Then
                         p.SetValue(Me, p.GetValue(_clone, Nothing), Nothing)
                     End If
                 Next
             End If
         End Sub
#End Region
         Public Sub BeginEdit1() Implements IEditableObject.BeginEdit
        End Sub
        Public Sub CancelEdit1() Implements IEditableObject.CancelEdit
        End Sub
        Public Sub EndEdit1() Implements IEditableObject.EndEdit
        End Sub
        Public Event PropertyChanged1(sender As Object, e As PropertyChangedEventArgs) Implements INotifyPropertyChanged.PropertyChanged
     End Class
 End Namespace

    6. Switch to Code View and add the following namespace:
      C#
      Copy Code 
      using C1.Xaml.FlexGrid;
using C1.Xaml;
using System.Collections.ObjectModel;
      Visual Basic
      Copy Code 
      Imports C1.Xaml.FlexGrid
Imports C1.Xaml
Imports System.Collections.ObjectModel

    7. Add the following code above the MainPage() constructor to represent the ICollectionView interface implementation:
      C#
      Copy Code 
      private readonly C1CollectionView _c1CollectionView;
private const string NoneItem = "(None)";
      Visual Basic
      Copy Code 
      Dim _c1CollectionView As C1CollectionView
Const NoneItem As String = "(None)"

    8. Insert the following code directly below the InitializeComponent() method to create a list and an observable collection. This code also sets the C1FlexGrid.ItemsSource property:
      C#
      Copy Code 
      IList<string> fieldNames = new string[] { "ID", "Name", "Country", "Active", "Hired", "Father", "Weight" };
            List<string> groupFields = new List<string>(fieldNames);
             groupFields.Sort();
             //groupFields.Remove("Active");
             List<string> filterFields = new List<string>(groupFields);
             groupFields.Insert(0, NoneItem);
             groupComboBox.ItemsSource = groupFields;
             groupComboBox.SelectedItem = NoneItem;
             filterComboBox.ItemsSource = filterFields;
             filterComboBox.SelectedIndex = 0;

             ObservableCollection<Customer> customers = Customer.GetCustomerList(50);
             _c1CollectionView = new C1CollectionView();
             _c1CollectionView.SourceCollection = customers;
            c1FlexGrid1.ItemsSource = _c1CollectionView;
         }
      Visual Basic
      Copy Code 
      Dim fieldNames As IList(Of String) = New String() {"ID", "Name", "Country", "Active", "Hired", "Father", "Weight"}
        Dim groupFields As New List(Of String)(fieldNames)
         groupFields.Sort()
         groupFields.Remove("Active")
         Dim filterFields As New List(Of String)(groupFields)
         groupFields.Insert(0, NoneItem)
         groupComboBox.ItemsSource = groupFields
         groupComboBox.SelectedItem = NoneItem
         filterComboBox.ItemsSource = filterFields
         filterComboBox.SelectedIndex = 0
        Dim customers As ObservableCollection(Of Customer) = Customer.GetCustomerList(50)
         _c1CollectionView = New C1CollectionView()
         _c1CollectionView.SourceCollection = customers
        flexgrid1.ItemsSource = _c1CollectionView

    9. To add  grouping capabilities, add the following code:
      C#
      Copy Code 
      void UpdateGrouping()
         {
             if (_c1CollectionView == null)
                 return;
             using (_c1CollectionView.DeferRefresh())
             {
                 _c1CollectionView.GroupDescriptions.Clear();
                 if (groupComboBox.SelectedItem != NoneItem)
                 {
                     _c1CollectionView.GroupDescriptions.Add(new PropertyGroupDescription((string)groupComboBox.SelectedItem));
                 }
             }
        }
      Visual Basic
      Copy Code 
      Private Sub UpdateGrouping()
         If (_c1CollectionView Is Nothing) Then
             Return
         End If
         _c1CollectionView.DeferRefresh()
         _c1CollectionView.GroupDescriptions.Clear()
         If (groupComboBox.SelectedItem <> NoneItem) Then
             _c1CollectionView.GroupDescriptions.Add(New PropertyGroupDescription(CType(groupComboBox.SelectedItem, String)))
         End If
     End Sub

    10. Set and control the C1FlexGrid's filtering capabilities with the following code:
      C#
      Copy Code 
      void UpdateFiltering()
         {
             if (filterTextBox.Text.Length == 0)
                 _c1CollectionView.Filter = null;
             else
             {
                 if (_c1CollectionView.Filter == null)
                     _c1CollectionView.Filter = FilterFunction;
                 else
                     _c1CollectionView.Refresh();
             }
         }
        bool FilterFunction(object customer)
         {
             Customer cust = customer as Customer;
             if (cust == null)
                 return false;
             object propValue = null;
             switch ((string)filterComboBox.SelectedItem)
             {
                 case "ID":
                     propValue = cust.ID;
                     break;
                 case "Name":
                     propValue = cust.Name;
                     break;
                 case "Country":
                     propValue = cust.Country;
                     break;
                 case "Hired":
                     propValue = cust.Hired;
                     break;
                 case "Father":
                     propValue = cust.Father;
                     break;
                 case "Weight":
                     propValue = cust.Weight;
                     break;
                 default:
                     return true;
             }
             if (propValue == null)
                 return false;
             return propValue.ToString().StartsWith(filterTextBox.Text, StringComparison.CurrentCultureIgnoreCase);
         }
      Visual Basic
      Copy Code 
      Private Sub UpdateFiltering()
         If filterTextBox.Text.Length = 0 Then
             _c1CollectionView.Filter = Nothing
         Else
             If _c1CollectionView.Filter Is Nothing Then
                 _c1CollectionView.Filter = AddressOf FilterFunction
             Else
                 _c1CollectionView.Refresh()
             End If
         End If
     End Sub
    Private Function FilterFunction(ByVal customer As Object) As Boolean '
         Dim cust As Customer = CType(customer, Customer)
         If (cust Is Nothing) Then
             Return False
         End If
        Dim propValue As Object = Nothing
         Select Case (CType(filterComboBox.SelectedItem, String))
             Case "ID"
                 propValue = cust.ID
             Case "Name"
                 propValue = cust.Name
             Case "Country"
                 propValue = cust.Country
             Case "Hired"
                 propValue = cust.Hired
             Case "Father"
                 propValue = cust.Father
             Case "Weight"
                 propValue = cust.Weight
             Case Else
                 Return True
         End Select

    11. Finally, add the following code to handle the ComboBox and TextBox SelectionChanged and TextChanged events:
      C#
      Copy Code 
      private void groupComboBox_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
         {
             UpdateGrouping();
         }
        private void filterTextBox_TextChanged_1(object sender, TextChangedEventArgs e)
         {
             UpdateFiltering();
         }
        private void filterComboBox_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
         {
             filterTextBox.Text = "";
         }
      Visual Basic
      Copy Code 
      If (propValue Is Nothing) Then
             Return False
         End If
         Return propValue.ToString.StartsWith(filterTextBox.Text, StringComparison.CurrentCultureIgnoreCase)
     End Function
     Private Sub groupComboBox_SelectionChanged_1(ByVal sender As Object, ByVal e As SelectionChangedEventArgs)
         UpdateGrouping()
     End Sub
     Private Sub filterTextBox_TextChanged_1(ByVal sender As Object, ByVal e As TextChangedEventArgs)
         UpdateFiltering()
     End Sub
     Private Sub filterComboBox_SelectionChanged_1(ByVal sender As Object, ByVal e As SelectionChangedEventArgs)
         filterTextBox.Text = ""
     End Sub

    12. When you run your application, you should be able to filter and group data in several different ways. Your C1FlexGrid control should resemble the following image: