.NET MAUI TreeDataGrid Item Hierarchy
The TreeDataGrid for MAUI exposes an ItemDescriptor proeprty (of type TreeDataGridItemDescriptor), which defines the entities that describe an item.
To specify the data items' hierarchy and how each item is visualized, use the TreeDataGridItemDescriptor class.
The TreeDataGridItemDescriptor class exposes the following properties:
| Property | Description |
|---|---|
ItemsSourceBinding (BindingBase) |
Specifies the binding that provides the children of an item in the TreeDataGrid. |
IsExpandableBinding (BindingBase) |
Specifies the binding that determines whether a tree arrow is displayed for items with children. |
Here is an example demonstrating how to define the data items' hierarchy by using the TreeDataGrid descriptor:
1. Set up the RadTreeDataGrid instance:
<telerik:RadTreeDataGrid x:Name="treeDataGrid"
ItemsSource="{Binding Items}"
AutoGenerateColumns="False">
<telerik:RadTreeDataGrid.ItemDescriptor>
<telerik:TreeDataGridItemDescriptor ItemsSourceBinding="{Binding Children}" />
</telerik:RadTreeDataGrid.ItemDescriptor>
<telerik:RadTreeDataGrid.BindingContext>
<local:ViewModel />
</telerik:RadTreeDataGrid.BindingContext>
<telerik:RadTreeDataGrid.Columns>
<telerik:DataGridTextColumn PropertyName="Name" />
<telerik:DataGridNumericalColumn PropertyName="Size" />
<telerik:DataGridTextColumn PropertyName="Type" />
</telerik:RadTreeDataGrid.Columns>
</telerik:RadTreeDataGrid>
2. Add the telerik namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. Create a sample Data class:
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; }
}
4. Add the ViewModel class:
public class ViewModel
{
public ViewModel()
{
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"),
new Data("Scheduler", 12, "File"),
new Data("TreeView", 2, "File"),
new Data("Calendar", 23, "File"),
new Data("RichTextEditor", 0, "File"),
new Data("PdfViewer", 55, "File"),
new Data("ToggleButton", 21, "File"),
new Data("TemplatedButton", 88, "File"),
}
},
new Data("Blank project", 0, "Folder")
}
});
Items.Add(new Data("Shared Documents", 643, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("Reports", 643, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("October", 234, "File"),
new Data("November", 0, "File"),
new Data("December", 409, "File")
}
}
}
});
Items.Add(new Data("Pictures", 643, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("Camera Roll", 231, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("hello.png", 107, "File"),
new Data("happy_summer.png", 0, "File"),
new Data("avatar.png", 124, "File")
}
},
new Data("Saved Pictures", 453, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("vacation.png", 234, "File"),
new Data("november.png", 0, "File"),
new Data("mountains.png", 227, "File")
}
}
}
});
Items.Add(new Data("Documents", 876, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("Internal Usage Only", 643, "Folder")
{
Children = new ObservableCollection<Data>()
{
new Data("reports.docx", 234, "File"),
new Data("confidential.xlsx", 0, "File"),
new Data("internal_usage.pdf", 409, "File")
}
}
}
});
}
public ObservableCollection<Data> Items { get; set; }
}
5. Register the Telerik controls through the Telerik.Maui.Controls.Compatibility.UseTelerik extension method called inside the CreateMauiApp method of the MauiProgram.cs file of your project:
using Telerik.Maui.Controls.Compatibility;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseTelerik()
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
return builder.Build();
}
}
This is the result on winUi and on Android:
For a runnable example with the TreeDataGrid Descriptor scenario, see the SDKBrowser Demo Application and go to TreeDataGrid > Getting Started category.