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.
1 Answer, 1 is accepted
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
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.