.NET MAUI DataGrid - DataTable Support
With 5.1.0 version of Telerik UI for .NET MAUI, 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.
Binding to a DataTable
The following example shows a sample DataGrid ItemsSource binding to a DataTable:
1. DataGrid definition:
<telerik:RadDataGrid ItemsSource="{Binding Data}">
<telerik:RadDataGrid.BindingContext>
<local:DataTableViewModel/>
</telerik:RadDataGrid.BindingContext>
</telerik:RadDataGrid>
2. Add the namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. The ViewModel used:
A sample Bind to DataTable example can be found in the DataGrid/DataTable folder of the SDKBrowser Demo Application.
Filtering, Sorting and Grouping operations
When using DataTable you can filter, group, sort the data inside the DataGrid through the UI or programmatically.
CRUD Operations with DataTable
All operations like add, remove, update data inside the DataGrid is supported when binding to a DataTable.
DataGrid definition
<Grid RowDefinitions="Auto,*">
<telerik:RadWrapLayout>
<Button Text="Add" Clicked="AddDataClicked"/>
<Button Text="Update 1st item" Clicked="UpdateDataClicked" />
<Button Text="Delete last item" Clicked="DeleteDataClicked"/>
</telerik:RadWrapLayout>
<telerik: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;
}
}
A sample CRUD Operations example can be found in the DataGrid/DataTable folder of the SDKBrowser Demo Application.
Commands
All available commands are descibed in the [DataGrid Commands] article (/devtools/maui/controls/datagrid/commands/overview).
A sample Commands example can be found in the DataGrid/DataTable folder of the SDKBrowser Demo Application.