Category / Section
How to create HierarchicalDataTemplate for the TreeViewAdv?
1 min read
The ItemTemplate of the TreeViewAdv displays the customized business object as TreeViewItemAdv. Since the TreeViewAdv displays the hierarchical data, the HierarchicalDataTemplate is used to define the ItemTemplate. Here, an example is illustrated to display the three-level Tree View, where the lowest level is expressed in a DataTemplate, then the HierarchicalDataTemplate is used for the Next level up from the lowest level and the first level to display the Hierarchical data structure.
Refer to the following code example
XAML
<Window x:Class="finalhierarchicaldatatemplate.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" syncfusion:SkinStorage.VisualStyle="Metro">
<Window.Resources>
<HierarchicalDataTemplate x:Key="Templatekey" ItemsSource="{Binding RelatedItems}" >
<TextBlock Foreground="Red" Text="{Binding Name}"/>
<HierarchicalDataTemplate.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding SubItems}" >
<TextBlock Foreground="Magenta" Text="{Binding Name}" />
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
</Window.Resources>
<Grid>
<syncfusion:TreeViewAdv ItemsSource="{Binding Items}" ItemTemplate="{StaticResource Templatekey}"/>
</Grid>
</Window>
C#
Model
public class Model
{
public Model()
{
RelatedItems = new ObservableCollection<Model1>();
}
public string Name { get; set; }
public ObservableCollection<Model1> RelatedItems { get; set; }
}
public class Model1
{
public Model1()
{
SubItems = new ObservableCollection<Model2>();
}
public string Name { get; set; }
public ObservableCollection<Model2> SubItems { get; set; }
}
public class Model2
{
public string Name{ get; set; }
}
ViewModel
public class ViewModel
{
public ViewModel()
{
Items = new ObservableCollection<Model>();
PopulateData();
}
public ObservableCollection<Model> Items { get; set; }
private void PopulateData()
{
Model root1 = new Model() { Name = "Send/Receive" };
Model1 subItem1 = new Model1 { Name = "Download" };
subItem1.SubItems.Add(new Model2() { Name = "Show Progress" });
subItem1.SubItems.Add(new Model2() { Name = "Cancel All" });
root1.RelatedItems.Add(subItem1);
Model1 subItem2 = new Model1 { Name = "Preferences" };
subItem2.SubItems.Add(new Model2() { Name = "Download Preferences" });
subItem2.SubItems.Add(new Model2() { Name = "Work Offline" });
root1.RelatedItems.Add(subItem2);
Model root2 = new Model() { Name = "View" };
Model1 subItem3 = new Model1 { Name = "Window" };
subItem3.SubItems.Add(new Model2() { Name = "Reminders Window" });
root2.RelatedItems.Add(subItem3);
Items.Add(root1);
Items.Add(root2);
}
}
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel();
}
}
The following screenshot illustrates the output.
Figure 1: Hierarchial DataTemplate for TreeViewAdv
