.NET MAUI TreeDataGrid Data Binding: Binding to a Collection
This article lists the source types supported by the Telerik UI for .NET MAUI TreeDataGrid. It guides you through the process of binding the DataGrid control to a collection of items and configuring the data binding for its columns.
Supported Collection Sources
To populate the DataGrid with data, use the ItemsSource property of the control. For compatibility reasons, the ItemsSource property of the .NET MAUI DataGrid is declared as a System.Object type. However, using collections that implement the IEnumerable interface is recommended as it gives you more flexibility.
Binding to an ObservableCollection
When you bind the RadTreeDataGrid to a collection that implements the INotifyCollectionChanged interface, the TreeDataGrid reflects and displays all changes to that collection, for example, any adding or removing of data items. The .NET MAUI framework implements the INotifyCollectionChanged interface in the ObservableCollection<T> class.
Implementations of the System.ComponentModel.ICollection interface are also fully supported. When using such collection sources, the RadTreeDataGrid automatically picks up any sort, or filter descriptions defined in the collection and uses them to display the data. This makes the System.ComponentModel.ICollection interface implementations the recommended collection source for the TreeDataGrid. To display the hierarchy of the items, define the TreeDataGridItemDescriptor.
The next example demonstrates how to bind the TreeDataGrid to an ObservableCollection.
For this example, the TreeDataGrid control is bound to a collection of Data objects.
1. Add a TreeDataGrid control to your page.
<telerik:RadTreeDataGrid ItemsSource="{Binding Items}" x:Name="tree"
AutoGenerateColumns="False">
<telerik:RadTreeDataGrid.ItemDescriptors>
<telerik:TreeDataGridItemDescriptor ChildrenBinding="{Binding Children}" />
</telerik:RadTreeDataGrid.ItemDescriptors>
<telerik:RadTreeDataGrid.BindingContext>
<local:ViewModel />
</telerik:RadTreeDataGrid.BindingContext>
</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; }
}
Binding the Columns
By default, TreeDataGrid generates typed columns automatically based on the public properties of the underlying data objects. When, for example, you set the ItemsSource of the RadTreeDataGrid to a collection of data (see the sample above), the control will create a separate column for each public property of the Data object.
To disable the automatic generation of TreeDataGrid columns and manually define them, set the control's AutoGenerateColumns property to False and manually populate the Columns collection.
1. Add a TreeDataGrid control to your page.
<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; }
}
To learn more about defining columns and the different types of columns, see the Columns Section.
Additional Resources
- .NET MAUI TreeDataGrid Product Page
- .NET MAUI TreeDataGrid Forum Page
- Telerik .NET MAUI Blogs
- Telerik .NET MAUI Roadmap