DataTable Support

With R1 2022 Release of Telerik UI for Xamarin, DataGrid fully supports binding to a DataTable.

All DataGrid features work with DataTable. You can add, remove, select, edit item(s) and update the DataGrid's ItemsSource. In addition, all available commands and operations like filtering, sorting, grouping, selection work when the DataGrid is bound to a DataTable.

Bind to DataTable

1. DataGrid definition:

   • XAML

   <telerikDataGrid:RadDataGrid ItemsSource="{Binding Data}">
     <telerikDataGrid:RadDataGrid.BindingContext>
         <local:DataTableViewModel/>
     </telerikDataGrid:RadDataGrid.BindingContext>
   </telerikDataGrid:RadDataGrid>

2. Add the namespace:

   • XAML

   xmlns:telerikDataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"

3. The ViewModel used:

   • C#

   public class DataTableViewModel : NotifyPropertyChangedBase
   {
   private DataTable data;
   
   public DataTable Data
   {
       get { return this.data; }
       set
       {
           this.UpdateValue(ref this.data, value);
       }
   }
   
   public DataTableViewModel()
   {
       this.Data = this.GetData();
   }
   
   private DataTable GetData()
   {
   
       DataTable country = new DataTable();
       country.TableName = "Cities";
       country.Columns.Add("Id", typeof(int));
       country.Columns.Add("City", typeof(string));
       country.Columns.Add("Population", typeof(int));
       country.Columns.Add("Visited On", typeof(DateTime));
       country.Columns.Add("IsVisited", typeof(bool));
   
       country.Rows.Add(0, "Sofia", 2000000, new DateTime(2012, 10, 1), true);
       country.Rows.Add(1, "New York", 8419000, null, false);
       country.Rows.Add(2, "London", 8982000, new DateTime(2019, 02, 11), true);
       country.Rows.Add(3, "Los Angeles", 3967000, null, false);
       country.Rows.Add(3, "Budapest", 1765000, new DateTime(2013, 02, 1), true);
       country.Rows.Add(3, "Tokyo", 9375104, new DateTime(2015, 09, 1), true);
   
       return country;
   }
   }

Where the DataTable namespace is using System.Data;

Filtering, Sorting, Grouping

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

CRUD Operations with DataTable

All operations like add, remove, update data inside the DataGrid is supported when the Source is from DataTable.

DataGrid definition:

• XAML

<Grid RowDefinitions="Auto,*">
    <telerikCommon:RadWrapLayout>
        <Button Text="Add" Clicked="AddDataClicked"/>
        <Button Text="Update 1st item" Clicked="UpdateDataClicked" />
        <Button Text="Delete last item" Clicked="DeleteDataClicked"/>
    </telerikCommon:RadWrapLayout>

    <telerikDataGrid:RadDataGrid ItemsSource="{Binding Data}"
                                 x:Name="dataGrid"
                                 SelectionMode="Single"
                                 SelectionUnit="Cell"
                                 SelectionChanged="RadDataGrid_SelectionChanged"
                                 Grid.Row="1"/>
</Grid>

Add row

• C#

private void AddDataClicked(object sender, EventArgs e)
{
    this.viewModel.Data.Rows.Add(12, "Madrid", 3223000, null, false);
}

Delete row

• C#

private void DeleteDataClicked(object sender, EventArgs e)
{
    int rowCount = this.viewModel.Data.Rows.Count;
    if (rowCount > 0)
    {
        this.viewModel.Data.Rows.RemoveAt(rowCount - 1);
    }
}

Update data

• C#

private void UpdateDataClicked(object sender, EventArgs e)
{
    if (this.viewModel.Data.Rows.Count > 0)
    {
        this.viewModel.Data.Rows[0]["City"] = "Seoul";
        this.viewModel.Data.Rows[0]["Population"] = 9776000;
    }
}

Examples

A sample Bind to DataTable example can be found in the DataGrid/DataTable folder of the SDK Samples Browser application.

A sample CRUD Operations example can be found in the DataGrid/DataTable folder of the SDK Samples Browser application.

A sample Commands example can be found in the DataGrid/DataTable folder of the SDK Samples Browser application.