Display Data Quickly in Telerik UI for Xamarin DataGrid Control Using DataTable Source

The first release of Telerik UI for Xamarin for the year is out, enriching our Xamarin suite with new useful functionalities and components. Among the new goodies is the long-awaited DataTable support for our DataGrid control.

DataGrid is a complex control used for visualizing data in a convenient way, at the same time providing means for editing, filtering, grouping and sorting that data. Until now, the only way to feed the DataGrid with some data has been through creating an IEnumerable collection of items. This has its limitations as you would need to know in advance the data item type used for that collection.

Starting with R1 2022 release, you’ll have the option to bind the DataGrid ItemsSource directly to a System.DataTable instance—thus giving you more flexibility to populate RadDataGrid with dynamic data. In addition, all the DataGrid features, such as filtering, sorting, grouping, selection, etc. will work smoothly with the DataTable source. Adding, removing and updating rows from the DataTable is automatically reflected in the UI as well.

Let’s review the new functionality in detail!

Configure DataTable Source

First, let’s create a sample ViewModel class with a System.DataTable property and fill that DataTable with some data. In our sample, that will be countries:

Add the DataGrid instance with ItemsSource applied:

Just need to set the ViewModel class as a binding context to the page and volia:

We have a DataGrid quickly and easily populated with data from a DataTable source:

Apply CRUD Operations

All operations such as add, update and delete data inside the DataGrid are supported with DataTable source. Any changes to the DataTable rows with code are immediately reflected in the UI.

For example, to add a new row to the DataTable you can use the following snippet in the ViewModel class:

Update and delete are executed in a similar way, you can check the exact approach in our documentation topic here: DataGrid: CRUD Operations with DataTable.

Check below a quick screencast showing how you can allow users to add new rows to the DataGrid (the same approach as above, just the new item values are taken from a small form):

Apply Filtering, Sorting and Grouping

When using DataTable, you can filter, group and sort the data inside the DataGrid through the UI or programmatically.

Let’s give this a try—add a sample GroupDescriptor (to group the countries by continent) and a FilterDescriptor (to show only the visited countries) to the DataGrid:

Running the app, you can see both programmatic filtering and grouping are applied. You can additionally remove/update them through the Filtering UI functionality of the DataGrid:

Try It Out and Share Your Feedback

I hope you enjoyed the new functionality of our DataGrid component.

The R1 2022 release is available for download in customers’ accounts. If you are new to Telerik UI for Xamarin, you can learn more about it via the product page. It comes with a 30-day free trial, giving you some time to explore the toolkit and consider using it for your current or upcoming Xamarin development.

We would love to hear what you think, so should you have any questions and/or comments, please share them in our Telerik UI for Xamarin Feedback Portal.