How to bind hierarchical data in multiple columns using TreeViewAdv control?
This article describes how to bind hierarchical data in multiple columns using TreeViewAdv control. Follow the below steps to populate TreeViewAdv control with hierarchical multiple column data.
Enable multiple columns
Set the property MultiColumnEnable of TreeViewAdv to enable multiple columns support in TreeViewAdv control.
Add columns
Add the required number of TreeViewColumn to the TreeViewColumnCollection and set it to the Columns property of TreeViewAdv control.
Column Header
Set header for each TreeViewColumn using its Header property.
Column CellTemplate
Set data template property for each TreeViewColumn using its CellTemplate property.
Set ItemTemplate
Use HierarchicalDataTemplate instead of DataTemplate to set ItemTemplate property of TreeViewAdv control, because DataTemplate cannot render hierarchical data. ItemsControl property of HierarchicalDataTemplate must be set, since it indicates where to find the collection that represents the next level in the data hierarchy.
The following code example demonstrates the same.
C#
public class TreeModel
{
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
private string description;
public string Description
{
get { return description; }
set { description = value; }
}
private ObservableCollection<TreeModel> children = new ObservableCollection<TreeModel>();
public ObservableCollection<TreeModel> Children
{
get { return children; }
set { children = value; }
}
}
public class ViewModel
{
private ObservableCollection<TreeModel> treeItems;
public ObservableCollection<TreeModel> TreeItems
{
get { return treeItems; }
set { treeItems = value; }
}
public ViewModel()
{
treeItems = new ObservableCollection<TreeModel>();
TreeModel item1 = new TreeModel();
item1.Name = "Item 1";
item1.Description = "Description about Item 1";
item1.Children.Add(new TreeModel() { Name = "Sub Item 1", Description = "Description about Sub Item 1" });
item1.Children.Add(new TreeModel() { Name = "Sub Item 2", Description = "Description about Sub Item 2" });
item1.Children.Add(new TreeModel() { Name = "Sub Item 3", Description = "Description about Sub Item 3" });
TreeModel item2 = new TreeModel();
item2.Name = "Item 2";
item2.Description = "Description about Item 2";
item2.Children.Add(new TreeModel() { Name = "Sub Item 1", Description = "Description about Sub Item 1" });
item2.Children.Add(new TreeModel() { Name = "Sub Item 2", Description = "Description about Sub Item 2" });
item2.Children.Add(new TreeModel() { Name = "Sub Item 3", Description = "Description about Sub Item 3" });
TreeModel item3 = new TreeModel();
item3.Name = "Item 3";
item3.Description = "Description about Item 3";
item3.Children.Add(new TreeModel() { Name = "Sub Item 1", Description = "Description about Sub Item 1" });
item3.Children.Add(new TreeModel() { Name = "Sub Item 2", Description = "Description about Sub Item 2" });
item3.Children.Add(new TreeModel() { Name = "Sub Item 3", Description = "Description about Sub Item 3" });
treeItems.Add(item1);
treeItems.Add(item2);
treeItems.Add(item3);
}
}
XAML
<syncfusion:TreeViewAdv ItemsSource="{Binding TreeItems}" MultiColumnEnable="True">
<syncfusion:TreeViewAdv.DataContext>
<local:ViewModel/>
</syncfusion:TreeViewAdv.DataContext>
<syncfusion:TreeViewAdv.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}">
<ContentControl Content="{Binding}"/>
</HierarchicalDataTemplate>
</syncfusion:TreeViewAdv.ItemTemplate>
<syncfusion:TreeViewAdv.Columns>
<syncfusion:TreeViewColumnCollection>
<syncfusion:TreeViewColumn Width="200" Header="Name">
<syncfusion:TreeViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</syncfusion:TreeViewColumn.CellTemplate>
</syncfusion:TreeViewColumn>
<syncfusion:TreeViewColumn Width="300" Header="Description">
<syncfusion:TreeViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Description}"/>
</DataTemplate>
</syncfusion:TreeViewColumn.CellTemplate>
</syncfusion:TreeViewColumn>
</syncfusion:TreeViewColumnCollection>
</syncfusion:TreeViewAdv.Columns>
</syncfusion:TreeViewAdv>
The following screenshot illustrates the output.
Figure 1: Child nodes expanded from parent node in TreeViewAdv
