RadDataGrid DataTable CellContentTemplate DataTemplate binding?

[Paul]

Using the DataTable and RadDataGrid example at https://docs.telerik.com/devtools/maui/controls/datagrid/datatable-support

How do I specify the binding for a CellContentTemplate  DataTemplate in XAML ?

For example, for IsVisited

<telerik:RadDataGrid.Columns>
    <telerik:DataGridBooleanColumn PropertyName="IsVisited" HeaderText="IsVisited" SizeMode="Auto"
                           CanUserEdit="False" CanUserFilter="false" IsResizable="false">
        <telerik:DataGridBooleanColumn.CellContentStyle>
            <telerik:DataGridTextCellStyle TextColor="Black" FontSize="14" SelectedTextColor="Blue" HorizontalTextAlignment="End" />
        </telerik:DataGridBooleanColumn.CellContentStyle>
        <telerik:DataGridColumn.CellContentTemplate>
            <DataTemplate>
                <telerik:RadCheckBox IsChecked="{Binding IsVisited}" IsEnabled="False" HorizontalOptions="Center"/>
            </DataTemplate>
        </telerik:DataGridColumn.CellContentTemplate>
    </telerik:DataGridBooleanColumn>
</telerik:RadDataGrid.Columns>

I'm getting the message

"Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics: Warning: 'IsVisited' property not found on 'System.Data.DataRowView', target property: 'Telerik.Maui.Controls.RadCheckBox.IsChecked'"

The checkbox is not checked when IsVisited is true.

[Didi]

Hello Paul,

When you use a cell-template - the RadDataGrid does not know which information (properties of an object, or values from a data-table row) you want to display. So the RadDataGrid will pass the whole row-item as a BindingContext to the template. So, in the template you have access to the DataRowView and you can hook-up any bindings you want. For the binding you have to use indexer syntax.

Here is a sample DataGrid definition with two columns and binding in the template:

<telerik:RadDataGrid ItemsSource="{Binding Data}"
                        AutoGenerateColumns="False">
    <telerik:RadDataGrid.BindingContext>
        <local:DataTableViewModel/>
    </telerik:RadDataGrid.BindingContext>
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridTextColumn PropertyName="City">
            <telerik:DataGridTextColumn.CellContentTemplate>
                <DataTemplate>
                    <Label Text="{Binding [City]}"/>
                </DataTemplate>
            </telerik:DataGridTextColumn.CellContentTemplate>
        </telerik:DataGridTextColumn>
        <telerik:DataGridBooleanColumn PropertyName="IsVisited">
            <telerik:DataGridBooleanColumn.CellContentTemplate>
                <DataTemplate>
                    <telerik:RadCheckBox IsChecked="{Binding [IsVisited]}"/>
                </DataTemplate>
            </telerik:DataGridBooleanColumn.CellContentTemplate>
        </telerik:DataGridBooleanColumn>
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

 

Do not forget to add the PropertyName to the column, as this is a typed column, not a template column.

And this is 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;
    }
}

 

Regards,
Didi
Progress Telerik