.NET MAUI DataGrid Support for DataTable
As of the Telerik UI for .NET MAUI 5.1.0 version, the DataGrid provides full and seamless support for all its features in the DataTable.
The component enables you to bind it to the DataTable and you can also add, remove, select, and edit DataGrid items, and update the DataGrid ItemsSource. All available DataGrid commands and operations, like filtering, sorting, grouping, and selection, are fully functioning when the DataGrid is bound to a DataTable.
Binding
The following example shows a sample DataGrid ItemsSource binding to a DataTable:
1. Define the DataGrid.
<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. Set the ViewModel.
public class DataTableViewModel : NotifyPropertyChangedBase
{
private DataTable data;
public DataTableViewModel()
{
this.Data = this.GetData();
}
public DataTable Data
{
get { return this.data; }
set { this.UpdateValue(ref this.data, value); }
}
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(4, "Budapest", 1765000, new DateTime(2013, 02, 1), true);
country.Rows.Add(5, "Tokyo", 9375104, new DateTime(2015, 09, 1), true);
return country;
}
}
For a full data-binding implementation of a DataGrid to a DataTable, see the
DataGrid/DataTablefolder of the SDKBrowser Demo Application.
Filtering, Sorting, and Grouping
When using a DataTable, you can filter, group, and sort the data inside the DataGrid through the UI or programmatically.
CRUD Operations
All CRUD operations, such as adding, removing, and updating the data inside the DataGrid, are supported when the DataGrid is bound to a DataTable.
1. Define the DataGrid.
<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>
2. Add a row.
private void AddDataClicked(object sender, EventArgs e)
{
this.viewModel.Data.Rows.Add(12, "Madrid", 3223000, null, false);
}
3. Delete a 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);
}
}
4. Update the 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;
}
}
For a full CRUD operations implementation of a DataGrid when bound to a DataTable, see the
DataGrid/DataTablefolder of the SDKBrowser Demo Application.
Commands
All commands supported by the DataGrid are fully applicable when the component is bound to a DataTable. For the full list, see the article with the available commands in the DataGrid.
For a sample implementation of the DataGrid commands in a DataTable, see the
DataGrid/DataTablefolder of the SDKBrowser Demo Application.
Additional Resources
- .NET MAUI DataGrid Product Page
- .NET MAUI DataGrid Forum Page
- Telerik .NET MAUI Blogs
- Telerik .NET MAUI Roadmap