.NET MAUI DataGrid Data Binding: Binding to DataTable

As of the Telerik UI for .NET MAUI 5.1.0 version, the .NET MAUI 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.

• XAML

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

2. Add the namespace.

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

3. Set the ViewModel.

• C#

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/DataTable folder 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.

• XAML

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

• C#

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

3. Delete a 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);
    }
}

4. Update the 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;
    }
}

For a full CRUD operations implementation of a DataGrid when bound to a DataTable, see the DataGrid/DataTable folder 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/DataTable folder of the SDKBrowser Demo Application.

Binding When Using a Cell Content Template

When you use a CellContentTemplate in the built-in columns and you need to bind a property from the business model to a UI element inside the template, you must use indexer syntax. Review the Specifying the Binding for a CellContentTemplate in Telerik .NET MAUI DataGrid with DataTable article for more details on how to achieve this.

Additional Resources

• .NET MAUI DataGrid Product Page
• .NET MAUI DataGrid Forum Page
• Telerik .NET MAUI Blogs
• Telerik .NET MAUI Roadmap