Data Binding in Xamarin DataGrid (SfDataGrid)

8 Sep 202323 minutes to read

The Xamarin Datagrid Control is bound to an external data source to display the data. It supports data sources such as List, and so on. The SfDataGrid.ItemsSource property helps to bind this control with collection of objects.

In order to bind data source of the SfDataGrid, set the SfDataGrid.ItemsSource property as follows. Such that each row in the SfDataGrid would bind to an object in data source. Each column would bind to a property in the data model object.

<?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:local="clr-namespace:DataGridDemo;assembly=DataGridDemo"
             xmlns:syncfusion="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms" 
             x:Class="DataGridDemo.Sample">

    <ContentPage.BindingContext>
        <local:OrderInfoRepository x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <syncfusion:SfDataGrid x:Name="dataGrid"
                               ItemsSource="{Binding OrderInfoCollection}">
        </syncfusion:SfDataGrid>
    </ContentPage.Content>
</ContentPage>
OrderInfoRepository viewModel = new OrderInfoRepository ();
dataGrid.ItemsSource = viewModel.OrderInfoCollection;

If the data source implements ICollectionChanged interface, then the SfDataGrid will automatically refresh the view when an item is added, removed, or cleared. When you add or remove an item in ObservableCollection, it automatically refreshes the view as the ObservableCollection. That implements the INotifyCollectionChanged. But when you do the same in List, it will not refresh the view automatically.

If the data model implements the INotifyPropertyChanged interface, then the SfDataGrid responds to the property change at runtime to update the view.

NOTE

The SfDataGrid does not supports DataTable binding in Xamarin.Forms since System.Data is inaccessible in Portable Class Library.

Binding with IEnumerable

The SfDataGrid control supports to bind any collection that implements the IEnumerable interface. All the data operations such as sorting, grouping, and filtering are supported when binding collection derived from IEnumerable.

Binding with DataTable

SfDataGrid control supports to bind the DataTable. SfDataGrid control automatically refresh the UI when binding DataTable as ItemsSource when rows are added, removed or cleared.

<sfGrid:SfDataGrid x:Name="dataGrid"
                   AutoGenerateColumns="False"
                   ItemsSource="{Binding Table}">
</sfGrid:SfDataGrid>
DataTable Table = this.GetDataTable();
this.sfDataGrid1.ItemsSource = Table;

Below are the limitations when binding DataTable as ItemsSource to SfDataGrid.

Binding complex properties

The SfDataGrid control supports to bind complex property to its columns. To bind complex property to the GridColumn, set the complex property path to the MappingName.

<sfGrid:SfDataGrid x:Name="dataGrid"
                   AutoGenerateColumns="False"
                   ItemsSource="{Binding OrdersInfo}">
    <sfGrid:SfDataGrid.Columns>
        <sfGrid:GridTextColumn MappingName="OrderID.Order" />
        <sfGrid:GridTextColumn MappingName="CustomerID" />
        <sfGrid:GridTextColumn MappingName="Freight" />
        <sfGrid:GridTextColumn MappingName="Country" />
    </sfGrid:SfDataGrid.Columns>
</sfGrid:SfDataGrid>
this.dataGrid.Columns.Add(new GridTextColumn() { MappingName = "OrderID.Order" });

View

The DataGrid has the View property of type ICollectionViewAdv interface that implements ICollectionView interface. View is responsible for maintaining and manipulating data and other advanced operations, like Sorting, Grouping, and etc.,

When you bind collection to the ItemsSource property of the SfDataGrid, then View will be created and maintains the operations on Data such as Grouping, Sorting, Insert, Delete, and Modification.

NOTE

The DataGrid creates different types of view derived from ICollectionViewAdv interface based on the ItemsSource.

IMPORTANT

View related properties can be used only after creating SfDataGrid view. Hence changes related to view can be done in SfDataGrid.GridViewCreated or SfDataGrid.GridLoaded event or in runtime only.

The following property is associated with View

LiveDataUpdateMode

The SfDataGrid supports to update the view during data manipulation operations and property changes using the LiveDataUpdateMode. It allows to update the view based on the SfDataGrid.View.LiveDataUpdateMode property.

LiveDataUpdateMode Description
Default Data operations are not updated.
AllowSummaryUpdate Summaries are updated during data manipulation change.
AllowDataShaping Data operations like sorting, grouping, and filtering are updated during data manipulation change.
  • C#
  • dataGrid.GridViewCreated += DataGrid_GridViewCreated;
    private void DataGrid_GridViewCreated(object sender, GridViewCreatedEventArgs e)
    {
        dataGrid.View.LiveDataUpdateMode = LiveDataUpdateMode.Default;
    }

    The following events are associated with View.

    RecordPropertyChanged

    The RecordPropertyChanged event is raised when DataModel property value is changed, if DataModel implements the INotifyPropertyChanged interface. The event receives with two arguments namely sender that handles the DataModel and the PropertyChangedEventArgs as argument.

    PropertyChangedEventArgs has the following property:

    PropertyName: It denotes the PropertyName of the changed value.

    CollectionChanged

    The CollectionChanged event is raised when changes in Records/DisplayElements collection. The event receives two arguments namely sender that handles View object and the NotifyCollectionChangedEventArgs as argument.

    NotifyCollectionChangedEventArgs has the following properties:

    Action: It contains the current action. (i.e.) Add, Remove, Move, Replace, Reset.
    NewItems: It contains the list of new items involved in the change.
    OldItems: It contains the list of old items affected by the Action.
    NewStartingIndex: It contains the index at which the change occurred.
    OldStartingIndex: It contains the index at which the Action occurred.

    SourceCollectionChanged

    The SourceCollectionChanged event is raised when making changes in SourceCollection. For example, adding or removing the collection. The event receives two arguments namely sender that handles GridQueryableCollectionViewWrapper object and the NotifyCollectionChangedEventArgs as argument.

    NotifyCollectionChangedEventArgs has the following properties:

    Action: It contains the current action. (i.e.) Add, Remove, Move, Replace, Reset.
    NewItems: It contains the list of new items involved in the change.
    OldItems: It contains the list of old items affected by the Action.
    NewStartingIndex: It contains the index at which the change occurred.
    OldStartingIndex: It contains the index at which the Action occurred.

    The following methods are associated with View which can be used to defer refresh the view:

    Method Name Description
    DeferRefresh Enter the defer cycle so that you can perform all data operations in view and update once.
    BeginInit & EndInit When BeginInit method is called it suspends all the updates until EndInit method is called. You can suspend and resume all the operations in these methods and update the view at once.

    Data Virtualization

    Data grid provides support to handle the large amount of data through built-in virtualization feature. With Data virtualization, the record entries will be created in the runtime only upon scrolling to the vertical end which increases the performance of grid loading time.

    To set SfDataGrid.EnableDataVirtualization property to true, follow the code example:

    <syncfusion:SfDataGrid x:Name="dataGrid"
                           AutoGenerateColumns="True"
                           ItemsSource="{Binding EmployeeDetails}"
                           EnableDataVirtualization="True">
    datagrid.EnableDataVirtualization = true;

    NotificationSubscriptionMode

    Data grid exposed SfDataGrid.NotificationSubscriptionMode property that allows you to set whether the underlying source collection items can listen to the INotifyCollectionChanged or INotifyPropertyChanging events. You can handle the property change or collection change by setting the NotificationSubscriptionMode property.

    NotificationSubscriptionMode Description
    CollectionChange Denotes a view that listens System.Collections.Specialized.INotifyCollectionChanged.CollectionChanged event of the SourceCollection.
    None Denotes System.ComponentModel.INotifyPropertyChanging.PropertyChanging, System.ComponentModel.INotifyPropertyChanged.PropertyChanged, and System.Collections.Specialized.INotifyCollectionChanged.CollectionChanged events will not be listened.
    PropertyChange Denotes a view that listens the System.ComponentModel.INotifyPropertyChanging.PropertyChanging and System.ComponentModel.INotifyPropertyChanged.PropertyChanged events of the data object.

    To set the NotificationSubscriptionMode property, follow the code example.

    <syncfusion:SfDataGrid x:Name="dataGrid"
                           AutoGenerateColumns="True"
                           ItemsSource="{Binding EmployeeDetails}"
                           NotificationSubscriptionMode="CollectionChange">
    dataGrid.NotificationSubscriptionMode = NotificationSubscriptionMode.CollectionChange;

    Binding SfDataGrid.SelectedIndex property

    You can bind any int value to the bindable property SfDataGrid.SelectedIndex which gets or sets the lastly selected row’s index in the SfDataGrid.

    Refer the below code to bind the SfDataGrid.SelectedIndex from the ViewModel.

  • XAML
  • <sfgrid:SfDataGrid x:Name="dataGrid"
                        AutoGenerateColumns="False" 
                        ItemsSource="{Binding OrderInfoCollection}"
                        SelectionMode="Multiple"
                        SelectedIndex="{Binding SelectedIndex}">
     </sfgrid:SfDataGrid>
  • C#
  • //ViewModel.cs code
    
            private int _selectedIndex;
    
            public int SelectedIndex
            {
                get { return _selectedIndex; }
                set { this._selectedIndex = value;RaisePropertyChanged("SelectedIndex"); }
            }
    
             public ViewModel()
            {
               this.SelectedIndex = 5;
            }

    Binding SfDataGrid.SelectedItem property

    You can bind any object value to the bindable property SfDataGrid.SelectedItem which gets or sets the selected item in the SfDataGrid.

    Refer the below code to bind the SfDataGrid.SelectedItem from the ViewModel.

  • XAML
  • <sfgrid:SfDataGrid x:Name="dataGrid"
                        AutoGenerateColumns="False" 
                        ItemsSource="{Binding OrderInfoCollection}"
                        SelectionMode="Multiple"
                        SelectedItem="{Binding SelectedItem}">
     </sfgrid:SfDataGrid>
  • C#
  • //ViewModel.cs code
    
            private object _selectedItem;
    
             public object SelectedItem
            {
                get { return _selectedItem; }
                set { this._selectedItem = value; RaisePropertyChanged("SelectedItem"); }
            }
    
             public ViewModel()
            {
                this.SelectedItem = this.OrderInfoCollection[8];
            }

    Binding SfDataGrid.SelectedItems property

    You can bind any object type collection to the bindable property SfDataGridSfDataGrid.SelectedItems which gets or sets the collection of SelectedItems collection in the SfDataGrid.

    Refer the below code to bind the SfDataGrid.SelectedItems from the ViewModel.

  • XAML
  • <sfgrid:SfDataGrid x:Name="dataGrid"
                        AutoGenerateColumns="False" 
                        ItemsSource="{Binding OrderInfoCollection}"
                        SelectionMode="Multiple"
                        SelectedItems="{Binding SelectedItems}">
     </sfgrid:SfDataGrid>
  • C#
  • //ViewModel.cs code
    
            private ObservableCollection<object> _selectedItems;
    
            public ObservableCollection<object> SelectedItems
            {
                get { return _selectedItems; }
                set { this._selectedItems = value; RaisePropertyChanged("SelectedItems"); }
            }
    
             public ViewModel()
            {
              this.SelectedItems.Add(OrderInfoCollection[1]);
              this.SelectedItems.Add(OrderInfoCollection[5]);
              this.SelectedItems.Add(OrderInfoCollection[8]);
            }

    Binding GridColumn properties

    You can also assign value via binding to the properties of the GridColumn such as HeaderCellTextSize,CellTextSize,FontAttribute,RecordFont,HeaderFont etc.

    Refer the below code to bind the GridColumn properties from the ViewModel.

  • XAML
  • <sfgrid:SfDataGrid x:Name="dataGrid"
                        AutoGenerateColumns="False" 
                        ItemsSource="{Binding OrderInfoCollection}">
        <sfgrid:SfDataGrid.Columns>
            <sfgrid:GridTextColumn MappingName="Customer" CellTextSize="{Binding CellTextSize,Source={x:Reference viewModel}}"/>
        </sfgrid:SfDataGrid.Columns>
     </sfgrid:SfDataGrid>
  • C#
  • //ViewModel.cs code
    
            private double _cellTextSize;
    
            public double CellTextSize
            {
                get { return _cellTextSize; }
                set { this._cellTextSize = value; RaisePropertyChanged("CellTextSize"); }
            }
    
             public ViewModel()
            {
              this.CellTextSize = 20;
            }

    Binding GridPickerColumn ItemsSource from ViewModel

    You can assign any object typed collection to the GridPickerColumn.ItemsSource to display a list of items in the GridPickerColumn when entering edit mode.

    Refer the below code to bind the ItemsSource of GridPickerColumn from the ViewModel.

  • XAML
  • <sfgrid:SfDataGrid x:Name="dataGrid"
                        AutoGenerateColumns="False" 
                        ItemsSource="{Binding OrderInfoCollection}">
        <sfgrid:SfDataGrid.Columns>
             <sfgrid:GridPickerColumn BindingContext="{x:Reference viewModel}"
                                      MappingName="ShipCity" 
                                      ItemsSource="{Binding CustomerNames}" HeaderText="PickerColumn"/>
        </sfgrid:SfDataGrid.Columns>
     </sfgrid:SfDataGrid>
  • C#
  • //ViewModel.cs code
    
            private ObservableCollection<string> _customerNames;
    
           public ObservableCollection<string> CustomerNames
            {
                get { return _customerNames; }
                set { this._customerNames = value; RaisePropertyChanged("CustomerNames"); }
            }
    
             public ViewModel()
            {
               this.CustomerNames = customerNames.ToObservableCollection();
            }
    
            string[] customerNames = { "Thomas", "John", "Hanna", "Laura", "Gina" };

    Binding the ItemsSource in ViewModel to the Picker loaded inside template

    The ItemsSource of a picker which is loaded inside the GridTemplateColumn can also be assigned any value via binding by passing the binding context as the Source to the ItemsSource property.

    Refer the below code to bind the ItemsSource of Picker loaded inside the GridTemplateColumn from the ViewModel.

  • XAML
  • <sfgrid:SfDataGrid x:Name="dataGrid"
                        AutoGenerateColumns="False" 
                        ItemsSource="{Binding OrderInfoCollection}">
        <sfgrid:SfDataGrid.Columns>
             <sfgrid:GridTemplateColumn   MappingName="Customer" HeaderText="Picker">
            <sfgrid:GridTemplateColumn.CellTemplate>
              <DataTemplate>
                  <Picker ItemsSource="{Binding SelectedModels,Source={x:Reference viewModel}}" SelectedIndex="0"/>
              </DataTemplate>
            </sfgrid:GridTemplateColumn.CellTemplate>
        </sfgrid:GridTemplateColumn>
        </sfgrid:SfDataGrid.Columns>
     </sfgrid:SfDataGrid>
  • C#
  • //ViewModel.cs code
    
            private List<String> _vehicleModel;
    
            public List<String> SelectedModels
            {
                get { return _vehicleModel; }
                set { this._vehicleModel = value;RaisePropertyChanged("SelectedCars"); }
            }
    
             public ViewModel()
            {
               this.SelectedModels = selectedModels.ToList();
            }
    
            string [] selectedModels = { "Select Car", "Audi", "Bentley", "Mercedes Benz", "Porsche" };

    Binding the button command in template column to ViewModel

    You can also assign any value to the Command property of the Button loaded inside the GridTemplateColumn via binding.

    Refer the below code to bind the command property of Button loaded inside the GridTemplateColumn from the ViewModel.

  • XAML
  • <sfgrid:SfDataGrid x:Name="dataGrid"
                        AutoGenerateColumns="False" 
                        ItemsSource="{Binding OrderInfoCollection}">
        <sfgrid:SfDataGrid.Columns>    
            <sfgrid:GridTemplateColumn MappingName="Customer">
                 <sfgrid:GridTemplateColumn.CellTemplate>
    
                     <DataTemplate>
                         <Button Text="Template" Command="{Binding ButtonCommand,Source={x:Reference viewModel}}"/>
                     </DataTemplate>
                </sfgrid:GridTemplateColumn.CellTemplate>
            </sfgrid:GridTemplateColumn>
        </sfgrid:SfDataGrid.Columns>
     </sfgrid:SfDataGrid>
  • C#
  • //ViewModel.cs code
    
            private Command _buttonCommand;
    
            public Command ButtonCommand
            {
                get { return _buttonCommand; }
                set { this._buttonCommand = value;RaisePropertyChanged("ButtonCommand"); }
            }
    
             public ViewModel()
            {
              this.ButtonCommand = new Command(CustomMethod);
            }
    
            public void CustomMethod()
            {
                // Customize your code here
            }

    You can download the source code of binding the SfDataGrid properties sample here

    NOTE

    You can refer to our Xamarin DataGrid feature tour page for its groundbreaking feature representations. You can also explore our Xamarin.Forms DataGrid example to knows various chart types and how to easily configured with built-in support for creating stunning visual effects.

    See also

    How to bind a column collection from view model in SfDataGrid Xamarin.Forms

    How to resolve “Cannot resolve reference `Xamarin.Android.Support.Interpolate’” in Xamarin.Forms Android projects

    How to resolve SfDataGrid not rendering issue in iOS and UWP

    How to configure and install SfDataGrid NuGet package in Visual Studio

    How to make Syncfusion.Xamarin.SfDataGrid to work in release mode in UWP when .NET Native tool chain is enabled

    How to apply the custom assemblies when configured the project with Syncfusion NuGet packages

    How to bind button command to ViewModel from TemplateColumn of DataGrid

    How to update the modified GridCell value for Dictionary

    How to use SfDataGrid in Prism

    How to commit the edited values when binding Dictionary in SfDataGrid

    How to load SfDataGrid dynamically with JSON data without POCO classes

    How to retain the SfDataGrid properties when changing the data source

    How to bind a view model property to header template

    How to overcome the DisplayBinding converter is not firing problem when XamlCompilation attribute is set as XamlCompilationOptions.Compile

    How to parse XML file and set as ItemsSource for SfDataGrid

    How to configure package source and install Syncfusion NuGet packages in an existing project

    How to render SfDataGrid for Xamarin.Forms.UWP in release mode

    How to get the X and Y coordinates when interacting with SfDataGrid

    How to resolve “Expecting class path separator ‘;’ before” error in Xamarin.Forms.Android

    How to display an animation while loading the data in the SfDataGrid