Support multiple ways of renaming tree node with MVVM

7 posts, 0 answers
  1. Duo
    Duo avatar
    3 posts
    Member since:
    Oct 2012

    Posted 29 Sep 2012 Link to this post

    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!


  2. Duo
    Duo avatar
    3 posts
    Member since:
    Oct 2012

    Posted 03 Oct 2012 Link to this post

    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 ***/




  3. UI for WPF is Visual Studio 2017 Ready
  4. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 03 Oct 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  5. Duo
    Duo avatar
    3 posts
    Member since:
    Oct 2012

    Posted 03 Oct 2012 Link to this post

    Hi!

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

    Duo
  6. Kevin
    Kevin avatar
    16 posts
    Member since:
    Nov 2007

    Posted 13 Feb 2013 Link to this post

    Thanks for coming back to post your solution!

    --Kdc
  7. Praveen
    Praveen avatar
    5 posts
    Member since:
    Apr 2015

    Posted 19 Jan in reply to Pavel R. Pavlov Link to this post

    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

  8. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 21 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for WPF is Visual Studio 2017 Ready