MVVM RadMenu Binding the command

6 posts, 0 answers
  1. hamish
    hamish avatar
    44 posts
    Member since:
    Jun 2007

    Posted 30 Apr 2014 Link to this post

    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



  2. Rosen Vladimirov
    Admin
    Rosen Vladimirov avatar
    640 posts

    Posted 30 Apr 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. Tayyaba
    Tayyaba avatar
    42 posts
    Member since:
    Apr 2017

    Posted 07 Feb 2018 Link to this post

    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>

     

    Let me know what am i doing wrong to set inputBindings?

     

    Thanks,

  4. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    477 posts

    Posted 09 Feb 2018 Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  5. Tayyaba
    Tayyaba avatar
    42 posts
    Member since:
    Apr 2017

    Posted 11 Feb 2018 in reply to Vladimir Stoyanov Link to this post

    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

  6. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    477 posts

    Posted 14 Feb 2018 Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top