Editable TreeViewItems, Hierarchical Data Templates and MVVM

[Bob]

I have a model class, Folder:

public class Folder
{
    public string Name { get; set; }
    public ObservableCollection<Folder> SubFolders { get; set; }
}

This is exposed to the UI via a view model, the the folder structure is displayed in a RadTreeView using a hierarchical data template and all is well.

I am adding a context menu to each Folder in the tree view, one of the options on the menu is "Rename". When this is clicked, I want the relevant RadTreeViewItem to go into edit mode.

I can add an "IsInEditMode" flag to the Folder, that's not a problem. The Command on the menu item is bound to the command on the view model, and I can get hold of the relevant Folder using a command parameter, that's not a problem.

But how to I set the IsEditable on the hierarchical data template? And how do I bind the IsInEditMode of the TreeViewItem to that of the Folder? Here is my current XAML (which shows a few other things, like a similar structure with the Tag objects:

<telerik:RadTreeView DockPanel.Dock="Top">
    <telerik:RadTreeViewItem Header="My Folders" ItemsSource="{Binding Folders}">
        <telerik:RadTreeViewItem.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding SubFolders}" DataType="{x:Type Model:Folder}">
                <TextBlock Text="{Binding Name}" />
            </HierarchicalDataTemplate>
        </telerik:RadTreeViewItem.ItemTemplate>
    </telerik:RadTreeViewItem>
</telerik:RadTreeView>

<telerik:RadTreeView DockPanel.Dock="Top">
    <telerik:RadTreeViewItem Header="My Tags" ItemsSource="{Binding Tags}">
        <telerik:RadTreeViewItem.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding SubTags}" DataType="{x:Type Model:Tag}">
                <TextBlock Text="{Binding Name}" >
                <telerik:RadContextMenu.ContextMenu>
                <telerik:RadContextMenu>
                    <telerik:RadMenuItem Header="Rename" Command="{StaticResource renameTagCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=DataContext}"/>
                    <telerik:RadMenuItem Header="Delete Tag"/>
                </telerik:RadContextMenu>
            </telerik:RadContextMenu.ContextMenu>
                </TextBlock>
            </HierarchicalDataTemplate>
        </telerik:RadTreeViewItem.ItemTemplate>
    </telerik:RadTreeViewItem>

Open to other suggestions. Cheers.

[Petar Mladenov]

Hi Bob,

 A possible way to bind a property of a visual container (in your case RadTreeViewItem) to a property from your ViewModel is to use StyleBindings. Here is an example of how you can bind the IsExpanded and IsSeleccted properties of the RadTreeViewItem:

<Style x:Key="ItemContainerStyle" TargetType="{x:Type telerik:RadTreeViewItem}">
    <Setter Property="IsSelected" Value="{Binding Path=Selected}"/>
    <Setter Property="IsExpanded" Value="{Binding Path=Expanded}"/>
</Style>

<telerik:RadTreeView  Margin="8"
    SelectionMode="Multiple"
    ItemsSource="{Binding Source={StaticResource TreeViewDataSource}}"
    ItemContainerStyle="{StaticResource ItemContainerStyle}"/>

You can check out this article describing how to use HierarchicalDataTemplates with StyleBindings in the RadTreeView.
I noticed that you use RadTreeViewItems defined in XAML and their ItemsSource property. Have you considered making the whole RadTreeView bound in an MVVM way ? You can use only the ItemsSource of the RadTreeView and create HierarchicalDataTemplates on different levels. You can also implement StyleSelectors to apply different Styles on particular items or items within different levels of the tree. 

Regards,
Petar Mladenov
the Telerik team