Data Binding in UWP DataGrid (SfDataGrid)

30 May 20237 minutes to read

SfDataGrid control is designed to display the bounded data in a tabular format. The data binding can be achieved by assigning the data sources to SfDataGrid.ItemsSource property.

XAML
<syncfusion:SfDataGrid  x:Name="dataGrid"
                        AutoGenerateColumns="True"
                        ItemsSource="{Binding Orders}" />

If the data source implements INotifyCollectionChanged interface, then SfDataGrid control will automatically refresh the UI when item is added, removed or while list cleared. When you add, remove item in ObservableCollection, SfDataGrid automatically refresh the UI as ObservableCollection implements INotifyCollectionChanged. But when you do the same in List, SfDataGrid will not refresh the UI automatically.

Binding with IEnumerable

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

Binding with dynamic data object

SfDataGrid control supports to bind dynamic data object. Below are the limitations when you are binding dynamic data object,

SfDataGrid doesn’t support LiveDataUpdateMode - AllowDataShaping and AllowSummaryUpdate.
In WinRT, UI won’t get refreshed when you are changing the property value. This is limitation in WinRT platform.

All the data operations (sorting, grouping, filtering and etc.) are supported when you are binding dynamic data object. If the data operations are not working as expected, set SfDataGrid.IsDynamicItemsSource property as true .

Binding Complex properties

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

XAML
<syncfusion:SfDataGrid AutoGenerateColumns="False" ItemsSource="{Binding Orders}">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridTextColumn MappingName="OrderID" />
        <syncfusion:GridTextColumn MappingName="Customer.CustomerID" />
        <syncfusion:GridTextColumn MappingName="ShipCity" />
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

All the data operations (sorting, grouping, filtering and etc.) are supported when you are binding complex property. If the data operations are not working as expected, set GridColumn.UseBindingValue as true to make it work.

Limitations when binding complex property

SfDataGrid doesn’t support LiveDataUpdateMode - AllowDataShaping and AllowSummaryUpdate.

Binding Indexer properties

SfDataGrid control provides support to bind an indexer property to its columns. To bind an indexer property to GridColumn, set the indexer property path to MappingName.

XAML
C#
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding Students}" AutoGenerateColumns="False">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridTextColumn MappingName="RollNo"/>
        <syncfusion:GridTextColumn MappingName="Name"/>
        <syncfusion:GridTextColumn MappingName="Marks[0]"/>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
this.dataGrid.Columns.Add(new GridTextColumn() {MappingName="Marks[0]"});

All the data operations (sorting, grouping, filtering and etc.) are supported when you are binding indexer property. If the data operations are not working as expected, set GridColumn.UseBindingValue as true to make it work.

Limitations when binding indexer property

SfDataGrid doesn’t support LiveDataUpdateMode - AllowDataShaping and AllowSummaryUpdate.

Defining source data type

Based on type of data item bound to SfDataGrid, the data operations and column auto generation are carried out. You can specify the type of underlying data item explicitly for doing data operation by setting SfDataGrid.SourceType property.

XAML
C#
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding Orders}" SourceType="{x:Type local:OrderInfo}"/>
dataGrid.SourceType = typeof(OrderInfo);

For example, when you set SourceType property, the columns are generated based on members of SourceType regardless of data items actual type. When your ItemsSource have different types derived from same type, you can set SourceType as base type for all different types.

Events

ItemsSourceChanged

SfDataGrid.ItemsSourceChanged event occurs when the data source is changed by using ItemsSource property.
This event receives two arguments namely sender that handles SfDataGrid and GridItemsSourceChangedEventArgs as objects.

The GridItemsSourceChangedEventArgs object contains the following properties

OldItemsSource - Gets the value of old data source
NewItemsSource - Get the value of new data source

View

DataGrid has the View property of type ICollectionViewAdv interface that implements ICollectionView interface. View is responsible for maintain and manipulation data and other advanced operations like Sorting, Grouping, Filtering and etc. When you bind Collection to ItemsSource property of SfDataGrid, then View will be created and maintains the operations on Data such as Grouping, Filtering, Sorting, Insert, Delete, and Modification. Following are some important properties that can be used for various purposes.

NOTE

DataGrid creates different types of views derived from ICollectionViewAdv interface based on ItemsSource.

Property	Type	Description
Records	IRecordsList	Maintains the Records that are displayed in View when DataGrid is not Grouped.
TopLevelGroup	TopLevelGroup	Maintains the Group information when DataGrid is Grouped.
TopLevelGroup.DisplayElements	GroupDisplayElements	Maintains the Records and Group information that are displayed in View when DataGrid is Grouped.
Filter	Predicate<object>	Get or sets the method that determines the data is suitable to be displayed in View.
FilterPredicates	ObservableCollection<IFilterDefinition>	Maintains the FilterPredicates that are created while filtering using Filtering UI.
Groups	ReadOnlyObservableCollection<object>	Maintains the top-level group information. It returns null value when there are no groups.
GroupDescriptions	ObservableCollection<GroupDescription>	Maintains the GroupDescription collection information. It describes how the items in the collection are grouped in the view.
SortDescriptions	SortDescriptionCollection	Maintains the SortDescription collection information. It describes how the items in the collection are sort in the view.
SourceCollection	IEnumerable	Maintains the underlying source collection.
TableSummaryRows	ObservableCollection<ISummaryRow>	Maintains the TableSummaryRows collection information. To know more about TableSummaries click here
SummaryRows	ObservableCollection<ISummaryRow>	Maintains the SummaryRows collection information. To know more about summaries click here
CaptionSummaryRows	ISummaryRow	Maintains the CaptionSummaryRow information. To know more about CaptionSummaries click here

The following events are associated with View.

RecordPropertyChanged

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

PropertyChangedEventArgs has below property,

PropertyName – It denotes the PropertyName of the changed value.

CollectionChanged

CollectionChanged event is raised whenever that is some change in Records / DisplayElements collection. The event receives two arguments namely sender that handles View object and NotifyCollectionChangedEventArgs as object.

NotifyCollectionChangedEventArgs has below 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

SourceCollectionChanged event is raised when you make changes in SourceCollection for example add or remove the collection. The event receives two arguments namely sender that handles GridQueryableCollectionViewWrapper object and NotifyCollectionChangedEventArgs as object.

NotifyCollectionChangedEventArgs has below 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 is the methods that 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 perform all the updation with in these methods and update the view at once.

NOTE

View has properties that already defined in SfDataGrid. It recommended setting those properties via SfDataGrid.

Maintain scroll position when changing the ItemsSource

By default, scroll position is not maintained. It gets reset, when changing SfDataGrid.ItemsSource value. You can maintain the scroll position of the grid by setting the SfDataGrid.CanMaintainScrollPosition value to true.

XAML
C#
<syncfusion:SfDataGrid  x:Name="dataGrid"
                        CanMaintainScrollPosition="True"
                        ItemsSource="{Binding Orders}"/>
dataGrid.CanMaintainScrollPosition = true;