Support multiple ways of renaming tree node with MVVM

[Duo]

I am using RadTreeView, there is a request to rename the name of the tree node with the following ways:
1. When the user presses "F2" key
2. When the user double clicks the tree node
3. When the user right click the mouse, select "Rename" from the context menu.

The tree node enters "editing mode" for editing.

The challenging work is to how to implement the above features with MVVM.

Can anyone provide some sample code to demo how to implement that?

Thanks in advance!

[Duo]

Looks like it is a tough question since no one answers it. I figured that out. Here is the solution:

/*** Begin of the code snippet in the view ***/
<telerik:RadTreeView Grid.Row="0" 
     IsDragDropEnabled="True" 
     IsDragTooltipEnabled="False" 
     x:Name="radTreeView" 
     HorizontalAlignment="Stretch" 
     VerticalAlignment="Stretch" 
     IsLineEnabled="True" 
     Margin="6" 
     IsEditable="True" 
     ItemEditTemplate="{StaticResource TreeNodeEditTemplate}" 
     ItemsSource="{Binding Root}" 
     ItemTemplate="{StaticResource TreeNode}" 
     SelectedItem="{Binding SelectedItem, Mode=TwoWay}"  >
<telerik:RadTreeView.ItemContainerStyle> 
     <Style TargetType="{x:Type telerik:RadTreeViewItem}"> 
         <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}"/> 
         <Setter Property="IsEditable" Value="{Binding IsEditable, Mode=TwoWay}"/> 
         <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/> 
         <Setter Property="IsInEditMode" Value="{Binding IsInEditMode, Mode=TwoWay}"/> 
     </Style>
</telerik:RadTreeView.ItemContainerStyle>
<telerik:RadContextMenu.ContextMenu> 
     <telerik:RadContextMenu x:Name="radContextMenu" ItemsSource="{Binding ContextMenu}"> 
     <i:Interaction.Triggers> 
         <i:EventTrigger EventName="Opened"> 
             <i:InvokeCommandAction Command="{Binding ContextMenuOpenedCommand}"/> 
         </i:EventTrigger> 
     </i:Interaction.Triggers> 
     </telerik:RadContextMenu>
</telerik:RadContextMenu.ContextMenu>
</telerik:RadTreeView>
/*** End of the code snippet in the view ***/

/*** Begin of the code snippet in view model ***/
public bool IsInEditMode
{ 
     get { return m_IsInEditMode; } 
     set 
     { 
         if (value != m_IsInEditMode) 
         { 
             m_IsInEditMode = value; 
             OnPropertyChanged(()=>IsInEditMode); 
         } 
     }
}

public bool IsEditable
{ 
     get { return m_IsEditable; } 
     set 
     { 
             m_IsEditable = value; 
             OnPropertyChanged(() => IsEditable); 
     } 
}

public ICommand RenameCommand
{ 
     get 
     { 
         return m_RenameCommand ?? (new DelegateCommand((param) => 
         { 
             if (!VerifySelectedItem()) 
             return; 
 
             m_ViewModel.SelectedItem.IsInEditMode = true; 
         })); 
     } 
}
/*** End of the code snippet in view model ***/

[Pavel R. Pavlov]

Hi Duo,

The first option (editing a RadTreeViewItem by pressing the "F2" key) is offered by the RadTreeView and you can activate it by setting it`s IsEditable property to True.

The second option (editing a RadTreeViewItem by double clicking on it) can be done by binding the RadTreeViewItem Command property and setting the CommandExecutionTrigger to DoubleClick as shown in the attached project. Please note that you have to bind the IsInEditMode property of the RadTreeViewItem in TwoWay binding mode.

The third option (editing a RadTreeViewItem by choosing "Rename" from a context menu) can be done by using the RadContexMenu control in the RadTreeView.ItemTemplate. You can bind the RadMenuItems Command property to the same ViewModel command definition you use to handle the DoubleClick action.

Kind regards,
TeamX2_Pavel
the Telerik team

[Duo]

Hi!

Thanks a lot for your sample code, it works as what I want!

Duo

[Kevin]

Thanks for coming back to post your solution!

--Kdc

[Praveen]

For the third option, does it require for the RadContextMenu to be in the RadTreeView.ItemTemplate? We are currently just using ItemsSource to populate our TreeView and don't use item templates at all. However, I am trying to achieve this rename through context menu. I've tried your suggestion, but it doesn't seem to work for me (using IsInEditMode). Please do suggest alternatives.

TIA

[Martin Ivanov]

Hello Praveen,

Another approach could be to define the context menu only for the RadTreeView control and subscribe for the Opening event of the menu. Then get the treeview item under the mouse and get is DataContext which you can set on the context menu. This way you can pass the corresponding treeview item data to the context menu.

<telerik:RadTreeView>
    <telerik:RadContextMenu.ContextMenu>
        <telerik:RadContextMenu Opening="RadContextMenu_Opening">
        </telerik:RadContextMenu>
    </telerik:RadContextMenu.ContextMenu>
</telerik:RadTreeView>

private void RadContextMenu_Opening(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    var hoveredElement = (FrameworkElement)Mouse.DirectlyOver;
    var hoveredTreeViewItem = ParentOfTypeExtensions.ParentOfType<RadTreeViewItem>(hoveredElement);
    var contextMenu = (RadContextMenu)sender;
    contextMenu.DataContext = hoveredTreeViewItem.Header;
}

I hope this helps.

Regards,
Martin
Telerik

[Swapnil]

Hi,

I am facing issue in RadTreeview Edittemplate on Mouse double click

RadTreeView:

 <telerik:RadTreeView x:Name="tvwList" IsDragDropEnabled="True" AllowDrop="False"   PreviewDragEnded="tvwShowsList_PreviewDragEnded"   
                             IsDragPreviewEnabled="True" IsExpandOnSingleClickEnabled="True"  ItemContainerStyle="{StaticResource ItemContainerStyle}"
                             ItemsSource="{Binding Source={StaticResource ShowsCollection}, Path=ShowDataSource}" IsDragTooltipEnabled="False"  Margin="8"
                             ItemTemplate="{StaticResource RootTemplate}" ItemEditTemplate="{DynamicResource EditShowTemplate}" IsEditable="True" ItemsIndent="1">
                        <telerik:RadTreeView.Resources>

 

EditTemplate:

      <StackPanel Orientation="Horizontal">
            <CheckBox Margin="0" IsChecked="{Binding Path=IsOwned, Mode=TwoWay}" />
             <TextBox  Margin="10" FontSize="12" FontFamily="Arial"  Text="{Binding Path=Subject, Mode=TwoWay}"/>
        </StackPanel>

 

 

 

 

I have above EditTemplate which should display on MouseDoubleclick event. When clicked on Node it fired MouseDoubleclicked event and show textbox and check box for fraction of second and then fired Edited event. When we checked using debugger, it works

 

When clicked on left corner of node then it called MouseDoubleclick event but this time it retain the state and after hitting enter button it called Edited event. And using F2 key it works correctly.

If we set <StackPanel Orientation="Vertical"> then it works perfectly fine. But that design not acceptable.

 

[Martin Ivanov]

Hello Swapnil,

I am not sure that I fully understand your requirement. I tried to set up a runnable project and test this but without the item templates and the items container style I cannot tell what happens. May I ask you to prepare a small and runnable project that illustrates the issue and send it in a new support ticket? Thank you for the cooperation.

Regards,
Martin Ivanov
Progress Telerik

[Swapnil]

Hi,

Please find attach demo project to replicate the issue.

Try to Mousedouble click on RadTreeViewNode text part it not worked.

But, If you click on Left side of the radTreeNode it works. or If you change the StackPanel Orientation to  "Vertical" then also it start working.

[Martin Ivanov]

Hello Swapnil,

The reported behavior appears because the treeview commits the edited item on mouse left button down. In other words if you are in edit mode and you click with the mouse the changes are commited.  When you double click the treeview enters edit mode but the click also commits the change and that is why the node flickers.

To resolve this instead of MouseDoubleClick you can use the ItemDoubleClick event of RadTreeView.

private void radTreeView_ItemDoubleClick(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    var item = (RadTreeViewItem)e.OriginalSource;
    item.BeginEdit();
}

Regards,
Martin Ivanov
Progress Telerik

[Swapnil]

Hi Martin,

Thanks for the suggestion, it works for me.