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
-
DataGrid definition:
<telerikDataGrid:RadDataGrid ItemsSource="{Binding Data}"> <telerikDataGrid:RadDataGrid.BindingContext> <local:DataTableViewModel/> </telerikDataGrid:RadDataGrid.BindingContext> </telerikDataGrid:RadDataGrid>
-
Add the namespace:
xmlns:telerikDataGrid="clr-namespace:Telerik.XamarinForms.DataGrid;assembly=Telerik.XamarinForms.DataGrid"
-
The ViewModel used:
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:
<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
private void AddDataClicked(object sender, EventArgs e)
{
this.viewModel.Data.Rows.Add(12, "Madrid", 3223000, null, false);
}
Delete row
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
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.