Data Binding in MAUI DataGrid (SfDataGrid)

13 Dec 20245 minutes to read

The .NET MAUI DataGrid Control is bound to an external data source to display the data in a tabular format. It supports data sources such as List, IEnumerable, and so on. The SfDataGrid.ItemsSource property helps to bind this control with a collection of objects.

The codes below codes demonstrate how to bind a data source to the SfDataGrid. Each row in the SfDataGrid binds to an object in the data source. Each column binds to a property in the data model object.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:GettingStarted"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
             x:Class="GettingStarted.MainPage">

    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>

    <syncfusion:SfDataGrid x:Name="sfDataGrid"
                       ItemsSource="{Binding OrderInfoCollection}" />
</ContentPage>

C#

OrderInfoViewModel orderInfoViewModel = new OrderInfoViewModel();
this.sfDataGrid.ItemsSource = orderInfoViewModel.OrderInfoCollection;

If the data source implements the 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.

Binding with IEnumerable

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

Binding with DataTable

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

C#

DataTable table = this.GetDataTable();
this.sfDataGrid1.ItemsSource = table;

Limitations

• Custom sorting is not supported.
• SfDataGrid.View.Filter is not supported.
• SfDataGrid.View.LiveDataUpdateMode is not supported.

Binding complex properties

The SfDataGrid control provides support for binding complex properties to its columns. To bind the complex property to DataGridColumn, set the complex property path to MappingName.

XAML

<syncfusion:SfDataGrid AutoGenerateColumnsMode="None"
                       ItemsSource="{Binding OrderInfoCollection}">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:DataGridTextColumn MappingName="OrderID" />
        <syncfusion:DataGridTextColumn MappingName="Customer.CustomerID" />
        <syncfusion:DataGridTextColumn MappingName="ShipCity" />
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

The SfDataGrid control provides support for binding complex properties such as indexers, dictionaries to its columns. To bind the complex property to DataGridColumn, set the UseBindingValue property to true.

XAML

<syncfusion:SfDataGrid AutoGenerateColumnsMode="None"
                       ItemsSource="{Binding OrderInfoCollection}">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:DataGridTextColumn MappingName="OrderID" UseBindingValue="True" />
        <syncfusion:DataGridTextColumn MappingName="CustomerID" UseBindingValue="True" />
        <syncfusion:DataGridTextColumn MappingName="ShipCity" UseBindingValue="True" />
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

Limitations when binding complex property

• SfDataGrid doesn’t support LiveDataUpdateMode - AllowDataShaping and AllowSummaryUpdate.

View

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

When you bind a collection to the ItemsSource property of the SfDataGrid, then View will be created and maintains the operations on Data such as Sorting, Filtering, Inserting, Deleting, and Modification.

Note: The SfDataGrid creates different types of view derived from ICollectionViewAdv interface based on the ItemsSource property.

LiveDataUpdateMode

During data manipulation operations and property changes, the SfDataGrid supports updating the view by using the LiveDataUpdateMode property which exists in the SfDataGrid.View class.

LiveDataUpdateMode	Description
Default	Data operations are not updated.
AllowSummaryUpdate	Summaries are updated during data manipulation change.
AllowDataShaping	Data operations like sorting, and filtering are updated during data manipulation change.

C#

this.sfDataGrid.Loaded += SfDataGrid_Loaded;

private void SfDataGrid_Loaded(object sender, EventArgs e)
{
    this.sfDataGrid.View.LiveDataUpdateMode = LiveDataUpdateMode.Default;
}

RecordPropertyChanged

The RecordPropertyChanged event is invoked when the value of the DataModel property 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 object contains the following property,

• PropertyName: Defines the PropertyName of the changed value in the DataModel.

SourceCollectionChanged

The SourceCollectionChanged event is invoked when the SourceCollection is changed, for example, adding or removing the collection. The event receives two arguments namely sender that handles GridQueryableCollectionViewWrapper object and the NotifyCollectionChangedEventArgs as argument. NotifyCollectionChangedEventArgs object contains the following properties,

• Action: Defines 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.

Retain scroll position

To retain the scroll position when ItemsSource changes, set the SfDataGrid.CanMaintainScrollPosition to true. If you set SfDataGrid.CanMaintainScrollPosition to true then on changing ItemsSource, the newly added ItemsSource will be loaded with the previous ItemsSource’s ScrollOffset.

C#

dataGrid.CanMaintainScrollPosition = true;