HierarchicalDataTemplate

[Chris]

Hi,

I'm using a HierarchicalDataTemplate to bind to a hierarchy of business objects. The nodes need an icon, some text and have an associated command that I want to bind in the xaml. I also want the nodes to be editable using the standard functionality and an edit template.

Below is my current template.

<telerik:HierarchicalDataTemplate x:Key="RootItemTemplate" ItemsSource="{Binding Items}" ItemTemplate="{StaticResource ChildItemTemplate}" >
    <Button ToolTipService.ToolTip="{Binding Description}" Command="{Binding DefaultCommand}">
        <Button.Resources>
            <Style TargetType="Button">
                <Setter Property="telerik:DragDropManager.AllowDrag" Value="True"></Setter>
            </Style>
        </Button.Resources>
        <Button.Template>
            <ControlTemplate>
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
                    <Image Source="{Binding Category, StringFormat='../Resources/Images/Icons/\{0\}_16.png'}" Width="16" Height="16" Margin="0,0,5,0"/>
                    <TextBlock Text="{Binding Name}" FontWeight="Bold"></TextBlock>
                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu x:Name="ContextMenu"
                                    ItemsSource="{Binding NavigationCommands}" ItemTemplate="{StaticResource ContextMenuItemTemplate}">
                        </telerik:RadContextMenu>
                    </telerik:RadContextMenu.ContextMenu>
                </StackPanel>
            </ControlTemplate>
        </Button.Template>
    </Button>
</telerik:HierarchicalDataTemplate>

Ideally, I just wanted to do the below but in the output the treeview nodes are indented.

<telerik:HierarchicalDataTemplate x:Key="ChildItemTemplate" ItemsSource="{Binding Items}">
    <telerik:RadTreeViewItem Header="{Binding Name}" Command="{Binding DefaultCommand}"
                                DefaultImageSrc="{Binding Category, StringFormat='../Resources/Images/Icons/\{0\}_16.png'}"
                                ToolTipService.ToolTip="{Binding Description}" Padding="0">
        <telerik:RadContextMenu.ContextMenu>
            <telerik:RadContextMenu x:Name="ContextMenu"
                                ItemsSource="{Binding NavigationCommands}" ItemTemplate="{StaticResource ContextMenuItemTemplate}">
            </telerik:RadContextMenu>
        </telerik:RadContextMenu.ContextMenu>
    </telerik:RadTreeViewItem>
</telerik:HierarchicalDataTemplate>

The problem I am having with my HierarchicalDataTemplate is that unless the mouse is over the button or image part of the template the command is not fired. And if the mouse is over the image or the button the item is not properly selected and the F2 key or double click will not work.

So my questions are:

1. Is it possible to include a <RadTreeViewItem> in a HierarchicalDataTemplate without the indenting? It would be my preference to use the RadTreeViewItem.
2. If I need to use a custom template, what is the structure I need to achieve the same basic functionality as the RadTreeViewItem that I can still bind a command to?

Thanks for any help,
Chris.

[Petar Mladenov]

Hi Chris,

 Placing a Button (in order to use Command) or RadTreeViewItem in a HierarchicalDataTemplate that will be applied on RadTreeViewItems is bad idea and may lead to various problems. Typically, in the HierarchicalDataTemplate we place a TextBlock and bind its Text property to a string property in the ViewModel. This TextBlock will be the Header of the RadTreeViewItem later generated. Properties like IsExpanded, IsSelected, Command, DefaultImageSrc could be bound to corresponding properties in the ViewModel via telerik's ContainerBindings. You can examine how this works in this documentation article. Please let us know if you need further assistance on this.  

Greetings,
Petar Mladenov
the Telerik team