Binding Template Column Button Command in TreeDataGrid
Environment
| Version | Product | Author |
|---|---|---|
| 12.1.0 | Telerik UI for .NET MAUI TreeDataGrid | Dobrinka Yordanova |
Description
I want to enable a button inside a template column in the TreeDataGrid for UI for .NET MAUI to return the entire row data when clicked. This involves binding the button's command parameter to the row data.
This knowledge base article also answers the following questions:
- How to bind a button inside a template column in TreeDataGrid?
- How to use button command in TreeDataGrid for UI for .NET MAUI?
- How to return row data using template column button in TreeDataGrid?
Solution
To achieve this functionality, follow these steps:
1. Define the TreeDataGrid with custom columns and include a template column for the button. The button's Command property is bound to the OpenTreeDataGridMenuCommand in the ViewModel, and the CommandParameter property is bound to the row data, enabling the retrieval of the entire row in the command execution:
<telerik:RadTreeDataGrid x:Name="treeDataGrid"
ItemsSource="{Binding Items}"
AutoGenerateColumns="False">
<telerik:RadTreeDataGrid.ItemDescriptor>
<telerik:TreeDataGridItemDescriptor ItemsSourceBinding="{Binding Children}" />
</telerik:RadTreeDataGrid.ItemDescriptor>
<telerik:RadTreeDataGrid.Columns>
<telerik:DataGridTextColumn PropertyName="Name" />
<telerik:DataGridNumericalColumn PropertyName="Size" />
<telerik:DataGridTextColumn PropertyName="Type" />
<telerik:DataGridTemplateColumn HeaderText="Context Menu">
<telerik:DataGridTemplateColumn.CellContentTemplate>
<DataTemplate>
<telerik:RadTemplatedButton Margin="8" Content="Click me"
Command="{Binding Source={RelativeSource AncestorType={x:Type local:OrdersViewModel}}, Path=OpenTreeDataGridMenuCommand}"
CommandParameter="{Binding}"
VerticalOptions="Center" />
</DataTemplate>
</telerik:DataGridTemplateColumn.CellContentTemplate>
</telerik:DataGridTemplateColumn>
</telerik:RadTreeDataGrid.Columns>
</telerik:RadTreeDataGrid>2. Create a data model representing the items in the TreeDataGrid:
public class Data
{
public Data(string name, int size, string type)
{
this.Name = name;
this.Size = size;
this.Type = type;
this.Children = new ObservableCollection<Data>();
}
public string Name { get; set; }
public int Size { get; set; }
public string Type { get; set; }
public ObservableCollection<Data> Children { get; set; }
}3. Implement a view model with a command that executes when the button is clicked:
public class OrdersViewModel : NotifyPropertyChangedBase
{
public ObservableCollection<Data> Items { get; set; }
public ICommand OpenTreeDataGridMenuCommand { get; }
public OrdersViewModel()
{
Items = new ObservableCollection<Data>();
Items.Add(new Data("My Projects", 234, "Folder")
{
Children = new ObservableCollection<Data>
{
new Data("Using latest Telerik .NET MAUI controls", 234 ,"Folder")
{
Children = new ObservableCollection<Data>
{
new Data("TreeDataGrid", 6, "File"),
new Data("CollectionView", 6, "File"),
new Data("DataGrid", 54, "File")
}
}
}
});
this.OpenTreeDataGridMenuCommand = new Command(OnOpenTreeMenu);
}
private void OnOpenTreeMenu(object obj)
{
var item = obj as Data;
if (item != null)
{
Application.Current.MainPage.DisplayAlert("Item Selected", $"You have selected {item.Name}", "OK");
}
}
}