Context menu command binding in Hierarchical Template with MVVM

6 posts, 0 answers
  1. Geoffrey
    Geoffrey avatar
    23 posts
    Member since:
    Mar 2011

    Posted 10 Sep 2012 Link to this post

    I have a treeview with a hierarchical template and I'm using mvvm. So far I have not been able to get the command binding correct for the context menu. It's trying to bind to the item's datacontext, but I want to bind it to the datacontext of the treeview. I have tried several approaches including relativesource, etc. Any help would be appreciated.

     
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 13 Sep 2012 Link to this post

    Hi Geoffrey,

     Please check out our test project. It basically shows a RadContextMenu in a RadtreeView. The DataContext of the RadTreeView is successfully passed to the RadContextMenu. RadTreeView uses the collection of DataItems from the MainViewModel and the ContextMenuItem uses the Command from the MainViewModel.
    Please let us know if this is what you need.

    Greetings,
    Petar Mladenov
    the Telerik team

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Geoffrey
    Geoffrey avatar
    23 posts
    Member since:
    Mar 2011

    Posted 17 Sep 2012 Link to this post

    Hi,

    I have placed my context menu inside the hierarchical template as I only want a context menu with certain items for that hierarchical item. But then I can only get the command to fire for the viewmodel of that item, not in the main viewmodel that the tree uses.

    Regards,
    Geoffrey 
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 20 Sep 2012 Link to this post

    Hello Geoffrey,

     As I managed to understand you need the ContextMenu to appear only at a particular tree level. So I refactored this project to have three independent HierarchyTemplates like so:

    <HierarchicalDataTemplate  x:Key="thirdLevelTemplate">
                <TextBlock Text="{Binding Name}" />
            </HierarchicalDataTemplate>
     
            <HierarchicalDataTemplate ItemsSource="{Binding Children}" x:Key="secondLevelTemplate" ItemTemplate="{StaticResource thirdLevelTemplate}">
                <Grid HorizontalAlignment="Stretch">
                    <TextBlock Text="{Binding Name}" />    
                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu x:Name="contextMenu">
                            <telerik:RadMenuItem Header="InvokeCommand"
                                    Command="{Binding ShowMessageBoxCommand, Source={StaticResource viewModel}}"/>
                        </telerik:RadContextMenu>
                    </telerik:RadContextMenu.ContextMenu>              
                </Grid>
                 
            </HierarchicalDataTemplate>
     
            <HierarchicalDataTemplate ItemsSource="{Binding Children}" x:Key="firstlevelTemplate" ItemTemplate="{StaticResource secondLevelTemplate}" >
                <TextBlock Text="{Binding Name}" />
            </HierarchicalDataTemplate>
    This way the ContextMenu appears only on the second level items. Command is bound to the MainViewModel's Command which is set as a local resource. Please let us know if this is what you needed.

    Kind regards,
    Petar Mladenov
    the Telerik team

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  6. Daniele
    Daniele avatar
    5 posts
    Member since:
    Apr 2016

    Posted 04 May in reply to Petar Mladenov Link to this post

    Good morning,

    I have the same problem, I have a different RadContextMenu for each DataTemplate and I need to bind Commands to ViewModel Commands but the concept of my application does not allow me to declare DataContext as StaticResource, because I need to call by code the constructor of the ViewModel from another window to specify some parameters.

    How can I solve it in this case?

    Regards

  7. Dinko
    Admin
    Dinko avatar
    203 posts

    Posted 06 May Link to this post

    Hello Daniele,

    In order to bind RadMenuItem to an ICommand property from your view model, you can bind the Tag property of the control which wraps the RadContextMenu control to the parent data context (in your case RadTreeView). Then you can bind the Command property of the RadMenuItem to the Tag property. For your convenience, I have modified the code snippet from the Peter reply.
    <HierarchicalDataTemplate  x:Key="thirdLevelTemplate">
        <TextBlock Text="{Binding Name}" />
    </HierarchicalDataTemplate>
      
    <HierarchicalDataTemplate ItemsSource="{Binding Children}" x:Key="secondLevelTemplate" ItemTemplate="{StaticResource thirdLevelTemplate}">
        <Grid HorizontalAlignment="Stretch"
              Tag="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadTreeView}}, Path=DataContext}">
            <TextBlock Text="{Binding Name}" />   
            <telerik:RadContextMenu.ContextMenu>
                <telerik:RadContextMenu x:Name="contextMenu">
                    <telerik:RadMenuItem Header="InvokeCommand"
                            Command="{Binding RelativeSource={RelativeSource Self},Path=Menu.UIElement.Tag.YourCommandName}}"/>
                </telerik:RadContextMenu>
            </telerik:RadContextMenu.ContextMenu>             
        </Grid>
    </HierarchicalDataTemplate>
      
    <HierarchicalDataTemplate ItemsSource="{Binding Children}" x:Key="firstlevelTemplate" ItemTemplate="{StaticResource secondLevelTemplate}" >
        <TextBlock Text="{Binding Name}" />
    </HierarchicalDataTemplate>

    Give this approach a try and let me know if this works for you.

    Regards,
    Dinko
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for WPF is Visual Studio 2017 Ready