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.

XAML
C#
<?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.

XAML
C#
<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.

Custom sorting is not supported.
SfDataGrid.View.Filter is not supported.
Advanced Filtering does not support Case Sensitive filtering.
GridUnboundColumn.Expression is not supported. This can be achieved by using the DataColumn of DataTable by setting DataColumn.Expression property.
SfDataGrid.LiveDataUpdateMode is not supported.
Filtering with TimeSpan values is not supported.
Filtering with sub second components in DateTime values is not supported.

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.

XAML
C#
<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.

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:

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:

XAML
C#
<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.

XAML
C#
<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>

//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>

//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>

//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>

//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>

//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>

//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>

//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.

Data Binding in Xamarin DataGrid (SfDataGrid)

Binding with IEnumerable

Binding with DataTable

Binding complex properties

View

LiveDataUpdateMode

RecordPropertyChanged

CollectionChanged

SourceCollectionChanged

Data Virtualization

NotificationSubscriptionMode

Binding SfDataGrid.SelectedIndex property

Binding SfDataGrid.SelectedItem property

Binding SfDataGrid.SelectedItems property

Binding GridColumn properties

Binding GridPickerColumn ItemsSource from ViewModel

Binding the ItemsSource in ViewModel to the Picker loaded inside template

Binding the button command in template column to ViewModel

See also