Connect XamDataGrid to an OData Remote Data Source to Beat Device Resource Limitations

Having the data available/downloaded to a mobile device with restricted resources may not always be possible. A solution to the device’s limitation is to fetch only as much data from the server as necessary to display at once. We have implemented the OData virtual data source for scenarios like this.

The OData virtual data source will connect to an OData service, and allow you to scroll through large amounts of records while keeping only a select few on the client at once. It also supports performing sorting and filtering on the server, rather than needing to pull the entire data set to the client first.

Here is how to connect our XamDataGrid to a remote data source. Create a Xamarin.Forms application. Then add the XamDataGrid to your page and define what columns to display in it.

<ig:XamDataGrid ItemsSource="{Binding}" 
		AutoGenerateColumns="True"
		RowHeight="80"
		SelectionMode="MultipleRow">
      <ig:XamDataGrid.Columns>
        <ig:NumericColumn PropertyPath="OrderID" HeaderText="Order ID" />
        <ig:TextColumn PropertyPath="CustomerID" HeaderText="Customer ID" />
        <ig:TextColumn PropertyPath="ShipName" HeaderText="Ship Name" />
        <ig:TextColumn PropertyPath="ShipCity" HeaderText="Ship City" />
      ig:XamDataGrid.Columns> ig:XamDataGrid>

Next you need to reference DataSource.DataProviders.OData.Core.dll, since that is where our OData virtual data source resides. Choose the end point you would like to connect to, e.g. a Web Service that returns OData. Set the URI of the Web Service as BaseUri. Pick the Collection to use as the EntitySet. The virtual data source requests data in chunks called pages. It performs this work behind the scenes and lets you pretend that you have simple list-style access to the data. PageSizeRequested should be set to a reasonable value for the number of records to be returned. Too low value would mean more requests to the server, while too big value may not be supported by the OData provider or may slow down fetching and decoding data. Something like 20-50 generally works well. The MaxCachedPages property would determine how many pages can be kept into memory before discarding the least recently used ones. In our sample, since the PageSizeRequested is set to 25 and the MaxCachedPages is 5, the number of records kept in memory would be 125 at a time.

Below is the code snippet showing how to set the OData virtual data source to connect to the Northwind sample data OData service hosted on odata.org:

var dataSource = new ODataVirtualDataSource()
{
	BaseUri = "http://services.odata.org/V4/Northwind/Northwind.svc",
	EntitySet = "Orders",
	PageSizeRequested = 25,
	MaxCachedPages = 5
};
this.BindingContext = dataSource;

To run the sample, restore the Infragistics NuGet packages needed (more information here), compile and deploy the application to a device/emulator/simulator.

Notice that you can continually scroll through the data in the grid without stopping. The grid is actually predicting which pages need to be loaded ahead of you reaching them so that you will not see any missing records. However, if you scroll fast enough, you may notice some place holders briefly show, before the real data fades into place, after being downloaded.

You will notice that even sorting the data grid works! This results in the queries for pages against the server being modified so that the data can be sorted server-side and only the needed pages being sent to the client. The same is true for filtering the data.

Excited to try it out? Download a trial of the Infragistics Ultimate UI Controls for Xamarin to get started. Here is the link to the sample application. Enjoy!