Controls / RadTreeView / Populating with Data

Hierarchical Data Templates

RadTreeViewItem inherits from HeaderedItemsControl and they can display hierarchical data, e.g. collections that contain other collections.

The HierarchicalDataTemplate class is designed to be used with HeaderedItemsControl types to display such data. There should be virtually no differences between the usage of HierarchicalDataTemplate in RadTreeView and other controls.

The following example demonstrates how to create a hierarchical data source and bind a RadTreeView to it, using a HierarchicalDataTemplate. The ItemsSource property of the HierarchicalDataTemplate specifies the binding that has to be applied to the ItemsSource property of each item. The DataTemplate property specifies the template that has to be applied on each item, while the ItemTemplate is the template applied on its child items. You can nest several HierarchicalDataTemplate declarations if you need a deeper level of hierarchy.

If you have a databound control, then you must consider the following rules.The ItemsControl prepares its children in a very different way, depending on the type of the child:

  • If it is a ContentControl, the ItemTemplate will be set as a ContentTemplate and the non-visual element as content.
  • If it is a HeaderedControl, the ItemTemplate will be set as a HeaderTemplate and the data item as a Header.
  • If it is a HeaderedContentControl (i.e. the two above combined), the item will go as Content, but the ContentTemplate won't be set. Instead, the item will be set as a Header and the ItemTemplate will be used as a HeaderTemplate.

If the item is an ItemsControl, these properties are set to the child items as well, what is called "inherited": ItemTemplate, ItemTemplateSelector, ItemContainerStyle, ItemContainerStyleSelector, ItemStringFormat, AnimationManager.IsAnimationEnabled.In the case of the RadTreeView, the tree items are HeaderedItemsControl, which means that the above properties will be passed along to all the items, and there is no need to set the ItemTemplate property of the HierarchicalDataTemplate, especially if there is a selector.The ItemContainerStyle will be set as a style for the containers, if there is none and an ItemContainerStyleSelector is present, a style will be selected. Then the ItemContainerStyle (Selector) properties will be passed along ig the container is an ItemsControl.The above rules can "mix" with the properties set in the HierarchicalDataTemplate to create even more combinations of ways to set the templates of items. The HeaderTemplate displayed for an item can be a result of one of the following:

  • Directly (locally) set HeaderTemplate.
  • Directly (locally) set HeaderTemplateSelector.
  • ItemTemplate of the parent ItemsControl.
  • ItemTemplateSelector of the parent ItemsControl.
  • ItemContainerStyle with a HeaderTemplate of the parent ItemsControl.
  • ItemContainerStyleSelector which selects a style with a HeaderTemplate.
  • ItemContainerStyle with a HeaderTemplateSelector of the parent ItemsControl.
  • ItemContainerStyleSelector which selects a style with a HeaderTemplateSelector.
  • An ItemTemplate set in the HierarchicalDataTemplate of the parent.
  • An ItemTemplateSelector set in the HierarchicalDataTemplate of the parent.
  • An ItemContainerStyle set in the HierarchicalDataTemplate of the parent, which sets a HeaderTemplate.
  • An ItemContainerStyleSelector set in the HierarchicalDataTemplate of the parent, which selects a style that sets a HeaderTemplate.
  • In WPF you have the DataType property of the DataTemplate which will be a last fallback if a template is not set at all.

The Telerik HierarchicalDataTemplate offers two properties - ItemContainerStyle and ItemContainerStyleSelector, which allows you to make your hierarchy quite flexible.An interesting point here is the precedence over what should be set. As always, local values are stronger than styles. But what happens when you have both an ItemContainerStyle set in the ItemsControl and the HierarchicalDataTemplate. Also what happens when you have an ItemContainerStyle set in the two above and in the ItemContainerStyle as well. The rule is that the ItemContainerStyle from the HierarchicalDataTemplate is applied to the first level of containers that has a style which is the same as the parent's. The last ItemContainerStyle to be actively set is inherited from them on. The same rule applies for selectors.For more information see the example below.

Example

We will specify the following classes, which are going to be used to the RadTreeView control.

  • MyItem: A class that will be our business object. This class will have a collection of MyItems. It will be used to show hierarchy in the RadTreeView.

  • MyViewModel: The main ViewModel class of the application.

    Example 1: Creating ViewModels

        public class MyItem 
    { 
        public string Title { get; set; } 
        public MyItem() 
        { 
            SubItems = new ObservableCollection<MyItem>(); 
        } 
        public ObservableCollection<MyItem> SubItems { get; set; } 
    } 
 
    public class MyViewModel : ViewModelBase 
    { 
        public ObservableCollection<MyItem> Data { get; set; } 
        public MyViewModel() 
        { 
            Data = new ObservableCollection<MyItem>(); 
            GetData(); 
        } 
 
        private void GetData() 
        { 
            foreach (var num in Enumerable.Range(1, 5)) 
            { 
                var item = new MyItem(); 
                item.Title = string.Format("{0} {1}", "Item", num); 
                for (int i = 0; i < 5; i++) 
                { 
                    var child = new MyItem(); 
                    child.Title = string.Format("{0} {1}'s {2}", "Item", num, i); 
                    item.SubItems.Add(child); 
                    for (int j = 0; j < 3; j++) 
                    { 
                        var grandChild = new MyItem(); 
                        grandChild.Title = string.Format("{0} {1} : {2}'s {3}", "Item", num, i, j); 
                        child.SubItems.Add(grandChild); 
                    } 
                } 
                Data.Add(item); 
            } 
        } 
    } 

        Public Class MyItem 
        Public Property Title As String 
 
        Public Sub New() 
            SubItems = New ObservableCollection(Of MyItem)() 
        End Sub 
 
        Public Property SubItems As ObservableCollection(Of MyItem) 
    End Class 
 
    Public Class MyViewModel 
        Inherits ViewModelBase 
 
        Public Property Data As ObservableCollection(Of MyItem) 
 
        Public Sub New() 
            Data = New ObservableCollection(Of MyItem)() 
            GetData() 
        End Sub 
 
        Private Sub GetData() 
            For Each num In Enumerable.Range(1, 5) 
                Dim item = New MyItem() 
                item.Title = String.Format("{0} {1}", "Item", num) 
 
                For i As Integer = 0 To 5 - 1 
                    Dim child = New MyItem() 
                    child.Title = String.Format("{0} {1}'s {2}", "Item", num, i) 
                    item.SubItems.Add(child) 
 
                    For j As Integer = 0 To 3 - 1 
                        Dim grandChild = New MyItem() 
                        grandChild.Title = String.Format("{0} {1} : {2}'s {3}", "Item", num, i, j) 
                        child.SubItems.Add(grandChild) 
                    Next 
                Next 
 
                Data.Add(item) 
            Next 
        End Sub 
    End Class

    Now consider both of the background notes at the beginning of the topic and take a look at the following code snippet. It declares a HierarchicalDataTemplate and uses the ItemContainerStyle property of both the RadTreeView and the HierarchicalDataTemplate.

    Example 2: Defining RadTreeView in XAML

        <Window.Resources> 
 
        <Style TargetType="telerik:RadTreeViewItem" x:Key="redStyle"> 
            <Setter Property="Background" Value="Red" /> 
            <Setter Property="ItemContainerStyle"> 
                <Setter.Value> 
                    <Style TargetType="telerik:RadTreeViewItem"> 
                        <Setter Property="Background" Value="Orange" /> 
                    </Style> 
                </Setter.Value> 
            </Setter> 
        </Style> 
 
        <Style TargetType="telerik:RadTreeViewItem" x:Key="greenStyle"> 
            <Setter Property="Background" Value="Green" /> 
        </Style> 
 
    </Window.Resources> 
    <Grid x:Name="LayoutRoot" Background="White"> 
 
        <telerik:RadTreeView Margin="8" ItemsSource="{Binding Data}" ItemContainerStyle="{StaticResource redStyle}"> 
            <telerik:RadTreeView.ItemTemplate>       
                <telerik:HierarchicalDataTemplate ItemsSource="{Binding SubItems}" ItemContainerStyle="{StaticResource greenStyle}"> 
                    <TextBlock Text="{Binding Title}" /> 
                </telerik:HierarchicalDataTemplate>      
            </telerik:RadTreeView.ItemTemplate> 
        </telerik:RadTreeView>       
    </Grid>

And finally, we need to set the DataContext of the MainWindow:

Example 3: Setting DataContext

public MainWindow() 
{ 
    InitializeComponent(); 
    this.DataContext = new MyViewModel(); 
} 

public MainWindow() 
{ 
    InitializeComponent(); 
    this.DataContext = new MyViewModel(); 
}

Here is the final result: Silverlight RadTreeView Custom HierarchicalDataTemplate and ItemContainerStyle

See Also

In this article
Related articles
Not finding the help you need? Improve this article