HierarchicalDataTemplate with root items

[Domagoj]

I have a problem with the TreeView control.

I have three types of domain items: Folder, Library, Link. They are all implemented as a single class - MyItem. The Icon and the Text properties are different for each of the types. Also, MyItem has a ObservableCollection<MyItem> property called Children that contains all the children nodes.

Their relative hierarchy is completely arbitrary - Folder can contain any number of folders, libraries or links, and the same is true for libraries and links. Also, any type of item can be a root item of the tree.

Here is my code for the TreeView (and related style):

<UserControl.Resources>
    <Style TargetType="telerik:RadTreeViewItem" x:Key="blueNode">
        <Setter Property="Background" Value="#AAF" />
    </Style>
</UserControl.Resources>

<telerik:RadTreeView
    ItemsOptionListType="CheckList"
    IsOptionElementsEnabled="True">

    <telerik:RadTreeView.ItemTemplate>
        <telerik:HierarchicalDataTemplate
            ItemsSource="{Binding Children}"
            ItemContainerStyle="{StaticResource blueNode}">

            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Icon}" />
                <TextBlock Text="{Binding Text}" />
            </StackPanel>

        </telerik:HierarchicalDataTemplate>
    </telerik:RadTreeView.ItemTemplate>

</telerik:RadTreeView>

All of the examples in the docs regarding Hierarchical data templates deal with the fixed structure of items, by levels - for example League - Division - Team. Such a tree always has a League element as a root and can't have a team as the root. My items can be arbitrary - in a way that the root of the tree should behave the same as the n-th-level child or the m-th-level leaf node. It doesn't matter where in the tree the item is.

However, the code I have provided styles the nodes differently. The root nodes don't get the "blueNode" style applied, while all other nodes (those that belong to the root nodes) do. Since HierarchicalDataTemplate (HDT) defines the item template, how is it possible that the binding defined (for Icon and Text) in HDT works, but applying a style does not.

How to approach this problem to make the first level of the tree (root items) work the same as all other nodes?
I understand that setting ItemContainerStyle on HDT sets the style for the children and since the root items are not the children of any other items the style is obviously not applied. However, there is no Style property for HDT which I can set so I am not sure how to solve this. Is setting the TreeView's ItemContainerStyle the only way to achieve what I need (since TreeView is the container of the root nodes)...

Any help?

[Tina Stancheva]

Hello Domagoj,

Telerik HierarchicalDataTemplate allows you to display a hierarchy of data items in an ItemsControl. You can customize the way the items are displayed on each level through the ItemTemplate and ItemContainerStyle properties:

• ItemTemplate - this property defines the DataTemplate that should be applied to the child items from the ItemsSource. If this property isn't set the items will be displayed accordingly to the template defined by the HierarchicalDataTemplate, thus allowing you to display a hierarchy with undefined number of levels.
• ItemContainerStyle - applies a style to the item containers for each child item. This property can be used when you want to define a different style for the different levels of the hierarchy. However, since your scenario requires you to apply the same style for each RadTreeViewItem, then it is really best to take advantage of the RadTreeView.ItemContainerStyle. The RadTreeView.ItemContainerStyle property will apply the same style to all RadTreeViewItems in the RadTreeView.

I hope this information will help you. However, if I'm missing something from your scenario or you need more information, please let me know.

Kind regards,
Tina Stancheva
the Telerik team