Data Binding from different sources in Xamarin.Android SfDataGrid

24 Dec 20208 minutes to read

The SfDataGrid is bound to an external data source to display the data. It supports the data sources such as List, ObservableCollection, and so on. The SfDataGrid.ItemsSource property helps binding the SfDataGrid with the collection of objects.

To bind the 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 the data source and each column would bind to a property in the data model object.

OrderInfoRepository viewModel = new OrderInfoRepository ();
dataGrid.ItemsSource = viewModel.OrderInfoCollection;

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

If the data model implements the INotifyPropertyChanged interface, 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 the IEnumerable interface. All the data operations such as sorting, grouping, and filtering are supported when binding collection derived from IEnumerable.

Binding with DataTable

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

The following code illustrates how to create and bind DataTable as ItemsSource to SfDataGrid.

// In ViewModel

public class ViewModel
{        
    public ViewModel()
    {
        SetRowsToGenerate(50);
    }
        
    private DataTable dataTable;

    public DataTable DataTable
    {
        get { return dataTable; }
        set { this.dataTable = value; }
    }

    public void SetRowsToGenerate (int count)
    {
        dataTable = new DataTable();
        dataTable.Columns.Add("Name");
        dataTable.Columns.Add("ID");

        for (int i = 1; i < count; i++)
        {
            dataTable.Rows.Add("Name" + i.ToString(),10000 + i);
        }
    }
}

// In MainActivity.cs

SfDataGrid dataGrid = new SfDataGrid(BaseContext);
ViewModel viewModel = new ViewModel();
dataGrid.ItemsSource = viewModel.DataTable;

SetContentView(dataGrid);

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 with dynamic data object

SfDataGrid control supports binding dynamic data object. The following code illustrates how to create and bind dynamic objects as ItemsSource to SfDataGrid.

// In ViewModel

public class ViewModel
{        
    public ViewModel()
    {
        SetRowsToGenerate(50);
    }
        
    private ObservableCollection<ExpandoObject> collection;

    public ObservableCollection<ExpandoObject> Collection
    {
        get { return collection; }
        set { this.collection = value; }
    }

    public void SetRowsToGenerate (int count)
    {
        collection = new ObservableCollection<ExpandoObject>();
        for (int i = 1; i < count; i++)
        {
            dynamic obj = new ExpandoObject();
            obj.Name = "Name" + i.ToString();
            obj.ID = 10000 + i;
            collection.Add(obj);
        }
    }
}

// In MainActivity.cs

SfDataGrid dataGrid = new SfDataGrid(BaseContext);
ViewModel viewModel = new ViewModel();
dataGrid.ItemsSource = viewModel.Collection;

SetContentView(dataGrid);

Binding Complex properties

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

this.dataGrid.Columns.Add(new GridTextColumn() { MappingName = "OrderID.Order" });

Binding Indexer properties

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

this.dataGrid.Columns.Add(new GridTextColumn() { MappingName = "CustomerID[0].Customer" });

View

The data grid 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, Grouping, etc.

When binding Collection to the ItemsSource property of the SfDataGrid, 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 views derived from the ICollectionViewAdv interface based on ItemsSource.

IMPORTANT

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

The following property is associated with View.

LiveDataUpdateMode

The SfDataGrid supports updating the view during data manipulation operations and property changes using LiveDataUpdateMode. It allows customizing when 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	DataOperations 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 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 argument.

PropertyChangedEventArgs has the following property:

PropertyName: It denotes the PropertyName of the changed value.

CollectionChanged

The CollectionChanged event is raised whenever changes occur in Records or DisplayElements collection. The event receives two arguments namely, sender that handles View object, and 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 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 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 to defer refresh the view:

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

Data virtualization

The SfDataGrid allows loading large amounts of data in less time by setting SfDataGrid.EnableDataVirtualization property to true.

To set the EnableDataVirtualization property, follow the code example.

datagrid.EnableDataVirtualization = true;