Render Fast with Virtualized Data Grids

Introduction

The Ultimate UI Controls for Xamarin data grid can handle unlimited data — rows or columns — with its virtual rendering capability. With this comes the fastest rendering, smooth touch interactions, and customized column and row interactions. In this lesson you’ll see the code to set up a data grid connected to an OData service and you’ll experience the incredible performance of the grid on iOS and Android.

With a few lines of sample code, you can connect to a publicly available data source from the Northwind service. You can use XamDataGrid to bind to an available data source (in this example an OData service), and display the data in a high-performance data grid.

Lesson Objectives

At the end of this lesson, you will have a high-performance grid using an OData data source. The major steps you’ll perform to do this are:

  1. Set up the project
  2. Define the data source
  3. Bind the source to the view
  4. Test the solution

For more information on the control used in this lesson, see the see the Xamarin Data Grid Control page.

Step 1: Setting up the Project

You can download the project used in this lesson by clicking here.

Setting Up the Project

Then, to run the projects for the first time after un-zipping, load the entire solution into Visual Studio, right-click on the Solution, and select Restore Packages.

Once that is complete, add a reference to both the Portable Class Library and the Android project to DataSource.DataProviders.OData.Core.dll. This file is in the OtherDependencies folder that is part of the ZIP download. You can do this by right-clicking the Reference folder in the Project, browsing to the OtherDependencies folder, and selecting the DataSource.DataProviders.OData.Core.dll.

Setting Up the Project

Do this for both projects in the solution. Then, finally, ensure the Target Android Version is set to "Use Compile using SDK version." You can find this setting by right-clicking on the Android project and selecting Properties.

Setting Up the Project

Step 2 Define the Data Source

Now you’re going to bind the Northwind service data source in GridRemoteDataViewModel. In the XFPerfSamples project, expand ViewModels, and then open the GridRemoteDataViewModel.cs source file.

The sample project has already created GridRemoteDataViewModel, and defined the data source as being OData. In the source, add the following code segment to define the data source.

BaseUri="http://services.odata.org/V4/Northwind/Northwind.svc",
EntitySet="Orders",
PageSizeRequested=25,
MaxCachedPages=5

The BaseUri defines the Northwind server as the OData source. From the Northwind service, the EntitySet defines what data is pulled from the service. The PageSizeRequested is the number of items per page that is returned every time a page is requested. The MaxCachedPages is how many pages are cached after being requested.

Define the Data Source

After defining the data source, the next step is to bind that source to the view.

Step 3 Bind the Data Source

After defining the source, you need to bind the source to the view. In the Visual Studio project, expand Views, and then open the GridRemoteData.xaml file. The requires the namespace for the Infragistics data grid. You can use the Infragistics Toolbox, which would automate the development of the necessary code. For the purpose of this lesson, we will write the code manually.

<igDataGrid:XamDataGrid x:Name="grid1" ItemSource="{Binding DataSource}" AutoGenerateColumns="False">
  <igDataGrid:XamDataGrid.Columns>
    <igDataGrid:TextColumn PropertyPath="OrderID" HeaderText="Order ID"/>
    <igDataGrid:TextColumn PropertyPath="CustomerID" HeaderText="Customer ID"/>
    <igDataGrid:TextColumn PropertyPath="ShipName" HeaderText="Ship Name" />
    <igDataGrid:TextColumn PropertyPath="ShipCity" HeaderText="Ship City" />
  </igDataGrid:XamDataGrid.Columns>
</igDataGrid:XamDataGrid>

In this example, we set the AutoGenerateColumns property to false. Setting the property to True would inspect the data source and then create the necessary columns. This can present some problems for mobile apps, depending on the data set that is being used. The above code segment specifies the columns manually as TextColumns.

Bind the Data Source

Step 4 Test the Solution

With the data source and binding configured, you can now test the solution on an emulator or physical hardware device. For this lesion, we will test using an Android 6.0 emulator. This will compile the application, build the APK, and deploy the package to the emulator or device. The debugger will start in the background in Visual Studio, and you will be able to interact with the app. From the app, click Grid – Remote Data.

Test the Solution

Depending on the device or emulator, the Grid will be blank initially as it loads the source data. The data will be populated in the grid after it loads, and as you scroll. Test the grid by scrolling with your mouse or finger to load multiple pages. If the data has not been sourced to load, a temporary cell will be displayed within the interface while the data is loaded.

Conclusion

The XamDataGrid is used with a variety of data source types Xamarin mobile apps. This enables you to create a high-performance data grid using the data source of your choice, resulting in a seamless experience for the end user.