Version

Binding Remote Data Source in XamDataGrid

This topic is designed to familiarize you with the concept of binding remote data source, as it relates to the XamDataGrid control.

In this topic

This topic contains the following sections

Required Background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic provides basic steps required for adding the XamDataGrid control to your view and populating it with sample data.

Remote Data

This example will walk you through the process of binding the XamDataGrid control to a remote data source, in this case to a web service hosting the Northwind database. Here you will use the provided oData resources to populate the XamDataGrid control with four TextColumn objects, (OrderID, CustomerID, ShipName and ShipName) and rows populated with informations about Orders.

  1. Instal the following NuGet packages for XF projects:

    • Microsoft.Data.Edm, Version=5.8.1

    • Microsoft.Data.OData, Version=5.8.1

    • Microsoft.Net.Http, Version=2.2.28

    • Microsoft.OData.Edm, Version=6.15.0

    • Microsoft.OData.Core, Version=6.15.0

    • Microsoft.Spatial, Version=6.15.0

    • Simple.OData.Client, Version=4.24.0.1

    • System.Spatial, Version=5.8.1

  1. Include the following OData resource classes in your project:

  1. Add permission to access the Internet by modifying properties of .Droid and .iOS projects in your application

Binding Data

  1. Add an instance of the XamDataGrid control to the main view of your application.

In XAML:

xmlns:grids="clr-namespace:Infragistics.XamarinForms.Controls.Grids;assembly=Infragistics.XF.DataGrid"
xmlns:local="clr-namespace:Infragistics.Data;assembly=YourAppName"
...
<grids:XamDataGrid x:Name="DataGrid" AutoGenerateColumns="False" >
    <!--TODO add text columns-->
    <!--TODO bind data source-->
</grids:XamDataGrid>

In C#:

using Infragistics.XamarinForms.Controls.Grids;
using Infragistics.Data;
...
var DataGrid = new XamDataGrid();
// TODO add text columns
// TODO bind data source

  1. Create four instances of the TextColumn class and add them to the XamDataGrid control as demonstrated in the following code:

In XAML:

<grids:XamDataGrid.Columns>
    <grids:TextColumn PropertyPath="OrderID"   />
    <grids:TextColumn PropertyPath="CustomerID"  />
    <grids:TextColumn PropertyPath="ShipName"  />
    <grids:TextColumn PropertyPath="ShipCity" />
</grids:XamDataGrid.Columns>

In C#:

var column1 = new TextColumn();
column1.PropertyPath = "OrderID";
var column2 = new TextColumn();
column2.PropertyPath = "CustomerID";

var column3 = new NumericColumn();
column3.PropertyPath = "ShipName";
var column4 = new NumericColumn();
column3.PropertyPath = "ShipCity";

DataGrid.Columns.Add(column1);
DataGrid.Columns.Add(column2);
DataGrid.Columns.Add(column3);
DataGrid.Columns.Add(column4);

  1. Create an instance of the OData virtual data source class with the following properties and assign it to the XamDataGrid control:

    • BaseURI - Sets the uniform resource identifier, (URI) of the virtual data source, e.g. the NorthWind web service

    • EntitySet - sets the name of a table defined in the the virtual data source

    • DesiredPageSize - sets the number of records that should be loaded at a time from the remote data source.

    • MaximumCachedPages - Sets the maximum number of cached pages for the virtual data source

Memory usage is a critical aspect of mobile application development and to limit the amount of memory that is used by the XamDataGrid control as well as the amount of network bandwidth required for retrieving remote data, records are only retrieved on as-needed basis. This behavior may be tailored by setting DesiredPageSize and MaximumCachedPages properties; in this case, we have 25 records per page and we are maintaining only 5 pages of these records at any given time. In the event that the user does not need to view the entire set of records, this is a very useful feature as only those records that are needed by the user are retrieved over the network and displayed.

In XAML:

<grids:XamDataGrid.ItemsSource>
    <local:ODataVirtualDataSource
        EntitySet= "Orders" PageSizeRequested="25" MaxCachedPages="5"
        BaseUri="http://services.odata.org/V4/Northwind/Northwind.svc">
    </local:ODataVirtualDataSource>
</grids:XamDataGrid.ItemsSource>

In C#:

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

  1. Save and run your application to verify the result. Your application should look like the following screenshot, barring any differences in screen orientation or pixel density.

Getting started with Databinding 3.png

Related Content

The following table lists topics that are related to this topic:

Topic Purpose

This topic provides information on supported column types in the XamDataGrid control.

This topic provides code examples on working with columns in the XamDataGrid control.

This topic provides code examples on binding local data in the XamDataGrid control.

Samples on Working with the data sources.