MVVM RadMenu Binding the command

[hamish]

I am trying to bind a dynamically generated menu. I have set up the following style:


<Style x:Key="MenuItemStyle" TargetType="telerik:RadMenuItem">

        <Setter Property="Header" Value="{Binding Header}" />

        <Setter Property="IsCheckable" Value="{Binding IsCheckable}" />

         

        <Setter Property="IsSeparator" Value="{Binding IsSeparator}" />

        <Setter Property="IsChecked" Value="{Binding IsChecked}" />

        <Setter Property="Icon" Value="{Binding IconUrl}" />

         

        <Setter Property="ItemsSource" Value="{Binding SubMenuItems}" />

        <Setter Property="Command" Value="{Binding MenuItemClicked}" />

        <Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource Self}}" />

      

        <Setter Property="IconTemplate" >

            <Setter.Value>

                <DataTemplate>

                    <Image Source="{Binding}" Stretch="Fill"/>

                </DataTemplate>

            </Setter.Value>

        </Setter>

 

    </Style>

</Window.Resources>
This Generates the menus just fine and they appear exactly as I expect HOWEVER the command does nothing ()i.e. the MENUCLICKED. I have set up the command MenuItemClicked in the ViewModel and correct instantiated it as an ICOMMAND but it never fires the command. What am I missing??. The command is set up as follows:

public ICommand MenuItemClicked { get; set; }

MenuItemClicked = new Command<RadMenuItem>(c =>
          {
              ....executesomeciodec);
          });

 I must have missed something but for the life of me I cannot see what. I know it is bound correctly as the menus are getting populated with the correct properties, icons and layouts.

Please advise - thank you

​

[Rosen Vladimirov]

Hello Hamish,

You can find an example how to use Commands with RadMenuItems in our SDK Repository. You can use Telerik's DelegateCommand in order to execute a method directly in your ViewModel, for example:

public ICommand MenuClickCommand { get; set; }

this.MenuClickCommand = new DelegateCommand(OnMenuClickCommandExecuted);

private void OnMenuClickCommandExecuted(object obj)
{
      // Command executed;
}

Hope this helps.

Regards,
Rosen Vladimirov
Telerik

 

 

[Tayyaba]

Hi,

How to dynamically set inputBindigns KeyBindings for menuItems?
I'm trying to do them as follows:

<Style x:Key="MenuItemContainerCustom" TargetType="telerik:RadMenuItem">
    <Setter Property="Header" Value="{Binding Text}"/>
    <Setter Property="telerik:InputBindingsManager.InputBindings">
        <Setter.Value>
            <InputBindingCollection>
                <KeyBinding Key="{Binding DataContext.Key}" Modifiers="{Binding DataContext.Modifier}" Command="{Binding DataContext.Command}" />
            </InputBindingCollection>
        </Setter.Value>
    </Setter>
    <Setter Property="IsSeparator" Value="{Binding IsSeparator}" />
    <Setter Property="Command" Value="{Binding Command}"/>
    <Setter Property="IsEnabled" Value="{Binding IsMenuItemEnabled}"/>
</Style>

<Style x:Key="ContextMenuStyle" TargetType="{x:Type telerik:RadTreeViewItem}" BasedOn="{StaticResource SelectionStyle}">
    <Setter Property="telerik:RadContextMenu.ContextMenu">
        <Setter.Value>
            <telerik:RadContextMenu Width="{Binding ContextMenu.Width}"
                                        InheritDataContext="False" IsOpen="{Binding ContextMenu.IsOpened, Mode=TwoWay}"
                                        DataContext="{Binding UIElement.ParentTreeView.DataContext, RelativeSource={RelativeSource Self}}"
                                        ItemsSource="{Binding ContextMenu.MenuItems}"
                    ItemContainerStyle="{StaticResource MenuItemContainerCustom}">
                <telerik:EventToCommandBehavior.EventBindings>
                    <telerik:EventBinding EventName="Opening" Command="{Binding ContextMenuOpeningCommand}" CommandParameter="{Binding Path=UIElement.Item, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=telerik:RadContextMenu}}" />
                </telerik:EventToCommandBehavior.EventBindings>
            </telerik:RadContextMenu>
        </Setter.Value>
    </Setter>
</Style>

[Vladimir Stoyanov]

Hello Tayyaba,

Thank you for the provided code snippet.

What I noticed is that you are binding the KeyBinding properties to the DataContext which will be the RadMenuItem in the case of that style. I guess that you want to bind these properties to properties in your view model. What I can suggest is to add the view model as a StaticResource in xaml and then use it as the source of the binding. I am attaching a sample project demonstrating this approach. Please note that you might have to adapt it to fit your particular scenario. 

I hope this helps. Let me know if I can be of any further assistance.

Regards,
Vladimir Stoyanov
Progress Telerik

[Tayyaba]

Hi Vladimir,

Thank you for helping me out.

But the approach that you've suggested will work for only one key and modifier, my eact RadMeniItem has their own key and modifiers as shortcuts to open them.
How can we do this?

 

Thanks

[Vladimir Stoyanov]

Hello Hamish,

Thank you for the additional information. 

You are correct that the provided approach assigns the style to all of the RadMenuItems. What I can suggest in order to assign different styles is to use an ItemContainerStyleSelector and choose the style based on the RadMenuItem. I am attaching a sample project demonstrating this approach for your reference. Please give it a try and let me know if that is what you had in mind. 

I am looking forward to your reply.

Regards,
Vladimir Stoyanov
Progress Telerik