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

Specifying the CellContentTemplate Binding in a MAUI DataGrid with a DataTable


Version Product Author
6.7.0 Telerik UI for .NET MAUI DataGrid Dobrinka Yordanova


When using a CellContentTemplate with a RadDataGrid that uses a DataTable as a source, you need to specify the binding for the template. This article provides an example of how to do this.


To specify the binding for a CellContentTemplate follow these steps:

  1. Define the RadDataGrid and set its ItemsSource property to the data source.
  2. Create the necessary columns and specify the PropertyName for each column.
  3. Inside the CellContentTemplate of the desired column, define the desired control and bind it to the appropriate property using the indexer syntax—[PropertyName].

Here is an example of a RadDataGrid with two columns and binding in the template in XAML and C#:

<telerik:RadDataGrid ItemsSource="{Binding Data}" AutoGenerateColumns="False">
        <telerik:DataGridTextColumn PropertyName="City">
                    <Label Text="{Binding [City]}"/>
        <telerik:DataGridBooleanColumn PropertyName="IsVisited">
                    <telerik:RadCheckBox IsChecked="{Binding [IsVisited]}"/>
public partial class MainPage : ContentPage
    DataTableViewModel vm;
    public MainPage()
        this.vm = new DataTableViewModel();
        this.BindingContext = this.vm;

        var grid = new RadDataGrid();
        grid.AutoGenerateColumns = false;
        grid.ItemsSource = this.vm.Data;
        var textColumn = new DataGridBooleanColumn { PropertyName = "City" };
        textColumn.CellContentTemplate = new DataTemplate(() =>
            Label label = new Label();
            label.SetBinding(Label.TextProperty, new Binding("[City]"));
            return label;
        var checkedColumn = new DataGridBooleanColumn { PropertyName = "IsVisited" };
        checkedColumn.CellContentTemplate = new DataTemplate(() =>
            RadCheckBox checkBox = new RadCheckBox();
            checkBox.SetBinding(RadCheckBox.IsCheckedProperty, new Binding("[IsVisited]"));
            return checkBox;

        this.Content = grid;

Make sure to add the PropertyName to each column to specify the binding. In this example, the City column is a DataGridTextColumn, and the IsVisited column is a DataGridBooleanColumn.

Create a ViewModel class to provide the data source for the RadDataGrid. Here is an example of the ViewModel:

public class DataTableViewModel : NotifyPropertyChangedBase
    private DataTable data;

    public DataTableViewModel()
        this.Data = this.GetData();

    public DataTable Data
        get { return; }
        set { this.UpdateValue(ref, 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;


  • The indexer syntax [PropertyName] is used to bind to a specific property in the DataRowView.
  • Make sure to set the PropertyName for each column to specify the binding.

See Also

In this article