New to Telerik UI for .NET MAUI? Start a free 30-day trial

.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.

See Also

In this article
Not finding the help you need?