RadMenuItem and its Header are clickable

10 posts, 1 answers
  1. Andreas
    Andreas avatar
    36 posts
    Member since:
    Sep 2008

    Posted 24 May 2011 Link to this post

    Hi,

    I use a RadContextMenu as the DropDownContent of a RadSplitButton. The RadContextMenu is populated with RadMenuItems using an ItemTemplate and Binding.

    If I start the App, open the Menu and try to click on the Menu-Item, the Item itself AND the Header are focused (please view attached screen shot). This problem does not appear when I add the MenuItems in the code-behind instead of using an ItemTemplate

    Can please somebody tell me how to avoid the header to be focused as well?

    Here is my code:
    <telerik:RadSplitButton Margin="10,5,0,0" IsToggle="True"
     Visibility="{Binding HasExternalValues, Converter={StaticResource VisibilityConverter}}"
     Grid.Column="2" Grid.Row="0"
     Content="..."
     HorizontalAlignment="Right"
     IsEnabled="True"
     IsOpen="{Binding ContextMenuIsOpen, Mode=TwoWay}"
     Command="{Binding splitButtonClick" CommandParameter="{Binding}">
                                                                                           
      <telerik:RadSplitButton.DropDownContent>
       <telerikNav:RadContextMenu
         ItemsSource="{Binding PropertyFillers}" StaysOpen="False">
     
        <telerikNav:RadContextMenu.ItemTemplate>
     
         <DataTemplate>
          <telerikNav:RadMenuItem
            commands:MenuItemClick.Command="{Binding menuItemClick}"
             Header="{Binding name, Converter={StaticResource AVHeaderConverter}}">
          </telerikNav:RadMenuItem>
         </DataTemplate>
       </telerikNav:RadContextMenu.ItemTemplate>
                                                                 
      </telerikNav:RadContextMenu>
     </telerik:RadSplitButton.DropDownContent>
    </telerik:RadSplitButton>

    Thanks for your help.

    Stefan
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 26 May 2011 Link to this post

    Hi Stefan,

    The issue you described is caused by the fact that the ItemTemplate that describes what to display inside the RadMenuItem containers defines a RadMenuItem. Basically, when you use DataTemplates, you should keep in mind that they control how to visualize the business objects that are populated inside a control.

    In your case when you bind the RadContextMenu ItemsSource to a business collection, the control creates a collection of RadMenuItems and looks for the ItemTemplate to define what to display inside those RadMenuItems. And when the ItemTemplate also contains a RadMenuItem, you will have a RadContextMenu with RadMenuItems and each RadMenuItem will contain another RadMenuItem thus causing the visual glitch you described.

    However, if you set a TextBlock element inside the ItemTemplate you will display the business objects inside each RadMenuItem in a TextBlock and you will get the same behavior as if you add the RadMenuItems in code-behind.

    Also, in order to bind the Command property of the RadMenuItem you can use Telerik's ContainerBindings as illustrated bellow:
    <UserControl.Resources>
        <telerik:ContainerBindingCollection x:Key="ContextMenuBindings">
            <telerik:ContainerBinding PropertyName="Command" Binding="{Binding menuItemClick}" />
        </telerik:ContainerBindingCollection>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
     
        <telerik:RadSplitButton Margin="10,5,0,0" IsToggle="True"
                Visibility="{Binding HasExternalValues, Converter={StaticResource VisibilityConverter}}" Grid.Column="2"
                Grid.Row="0" Content="..." HorizontalAlignment="Right" IsEnabled="True"
                IsOpen="{Binding ContextMenuIsOpen, Mode=TwoWay}" Command="{Binding splitButtonClick"
                CommandParameter="{Binding}">
     
            <telerik:RadSplitButton.DropDownContent>
                <telerikNav:RadContextMenu ItemsSource="{Binding PropertyFillers}" StaysOpen="False">
                    <telerikNav:RadContextMenu.ItemTemplate>
                        <DataTemplate telerik:ContainerBinding.ContainerBindings="{StaticResource ContextMenuBindings}">
                            <TextBlock Text="{Binding name, Converter={StaticResource AVHeaderConverter}}" />
                        </DataTemplate>
                    </telerikNav:RadContextMenu.ItemTemplate>
     
                </telerikNav:RadContextMenu>
            </telerik:RadSplitButton.DropDownContent>
        </telerik:RadSplitButton>
    </Grid>

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

    Best wishes,
    Tina Stancheva
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Andreas
    Andreas avatar
    36 posts
    Member since:
    Sep 2008

    Posted 31 May 2011 Link to this post

    Hi,

    your solution solved the optical problem - there is now only one way to click on the menu item. But I can't figure how to react on a click on the TextBlock.

    In my approach I use a Command "MenuItemClick" and a Behavior "MenuItemClickCommandBehavior" to react on the click of the menu item in order to have the event arguments. I use this construction because I need the DataContext of the MenuItem and of its ContextMenu as information to process a click.

    XAML:
    <telerikNav:RadMenuItem
     commands:MenuItemClick.Command="{Binding menuItemClick}"
     Header="{Binding name, Converter={StaticResource AVHeaderConverter}}">
    </telerikNav:RadMenuItem>

    Behavior:
    public class MenuItemClickCommandBehavior : CommandBehaviorBase<RadMenuItem>
    {
     public MenuItemClickCommandBehavior(RadMenuItem menuItem) : base( menuItem )
     {
       menuItem.Click += new Telerik.Windows.RadRoutedEventHandler(menuItem_Click);
     }
      
     private void menuItem_Click(object sender, RoutedEventArgs e)
     {
       RadMenuItem menuItem = sender as RadMenuItem;
        
       RadContextMenu menu = menuItem.GetVisualParent<RadContextMenu>();
       if(menu != null)
       {
        PropertyRow row = menu.DataContext as PropertyRow;
        row.LastClickedPropertyFiller = menuItem.DataContext as SPropertyFiller;
        row.ContextMenuIsOpen = false;
     
        CommandParameter = row;
        ExecuteCommand();
       }
     }
    }

    Can you please give me an example how to incorporate my Command and my Behavior in your solution.

    Thanks,
    Stefan
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 03 Jun 2011 Link to this post

    Hi Stefan,

    The approach I suggested allows you to take advantage of the Telerik DelegateCommand, It also allows you to set a CommandParameter for the Command property of the RadMenuItem thus passing the RadMenuItem.DataContext to the DelegateCommand defined in the view model.

    I attached a sample project to illustrate what I have in mind. Please have a look at it and let me know if it will work in your case.

    Kind regards,
    Tina Stancheva
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  6. Andreas
    Andreas avatar
    36 posts
    Member since:
    Sep 2008

    Posted 06 Jun 2011 Link to this post

    Hi,

    your solution does not solve my problem. I've extended your example for better illustration. Is there a way to send it back to you instead of posting all the code here?

    The problem is, that the Button itself is part of an ItemControl.ItemsTemplate. In the example, if the user clicks on a MenuItem I need not only the DataItem, the user has clicked on, but also the Row, in which the  User has clicked on the MenuItems of a RadSplitButton in Method ExecuteHandler(...).

    Here the relevant code:
    <UserControl x:Class="SplitButtonDropDownContent.MainPage"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:local="clr-namespace:SplitButtonDropDownContent"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                 d:DesignHeight="300"
                 d:DesignWidth="400"
                 mc:Ignorable="d">
        
     <UserControl.Resources>
       <telerik:ContainerBindingCollection x:Key="ContextMenuBindings">
        <telerik:ContainerBinding Binding="{Binding MyCommand}" PropertyName="Command" />
        <telerik:ContainerBinding Binding="{Binding}" PropertyName="CommandParameter" />
       </telerik:ContainerBindingCollection>
     </UserControl.Resources>

    <
    Grid x:Name="LayoutRoot" Background="White">
     <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
      <ItemsControl x:Name="myItems" ItemsSource="{Binding AllGridRows, Mode=TwoWay}">
        <ItemsControl.ItemTemplate>
        <DataTemplate>                  
         <Grid HorizontalAlignment="Stretch" VerticalAlignment="Top" ShowGridLines="False">
          <Grid.ColumnDefinitions>
           <ColumnDefinition Width="100"></ColumnDefinition>
           <ColumnDefinition Width="100"></ColumnDefinition>
           <ColumnDefinition Width="100"></ColumnDefinition>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
           <RowDefinition Height="27"></RowDefinition>
          </Grid.RowDefinitions>
     
          <TextBlock Text="{Binding RowName}" Grid.Column="0" Grid.Row="0" Height="22" Width="100"></TextBlock>
          <TextBox Grid.Column="1" Text="{Binding Text, Mode=TwoWay}"></TextBox>
                               
          <telerik:RadSplitButton Width="45"  Grid.Column="2" Content="..." HorizontalAlignment="Center"
                VerticalAlignment="Center">
           <telerik:RadSplitButton.DropDownContent>
     
           <telerik:RadContextMenu ItemsSource="{Binding DropDownContent}" StaysOpen="False">
            <telerik:RadContextMenu.ItemTemplate>
             <DataTemplate telerik:ContainerBinding.ContainerBindings="{StaticResource ContextMenuBindings}">
              <TextBlock Text="{Binding Header}" />
             </DataTemplate>
            </telerik:RadContextMenu.ItemTemplate>
           </telerik:RadContextMenu>
          </telerik:RadSplitButton.DropDownContent>
         </telerik:RadSplitButton >
        </Grid>
       </DataTemplate>
      </ItemsControl.ItemTemplate>
     </ItemsControl>
    </Grid>
    </Grid>
    </UserControl>


    MyViewModel
    public class MyViewModel
    {
    public ObservableCollection<Row> AllGridRows { get; private set; }
     
    public MyViewModel()
    {
       AllGridRows = new ObservableCollection<Row>();
       for (int i = 0; i < 8; i++)
       {
         AllGridRows.Add(new Row() { RowName = String.Format("RowName {0}", i) });
       }
         }
    }


    New Class Row:
    using System;
    using System.Collections.ObjectModel;
     
    namespace SplitButtonDropDownContent
    {
     public class Row
     {
      public Row()
      {
       DropDownContent = new ObservableCollection<DataItem>();
       for (int i = 0; i < 8; i++)
       {
        DropDownContent.Add(new DataItem() { Header = String.Format("MenuItem {0}", i) });
       }
     }
     
      public String RowName { get; set; }
     
      public String Text { get; set; }
     
      public ObservableCollection<DataItem> DropDownContent { get; set; }
     }
    }


    Thanks for your help,
    Stefan
  7. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 09 Jun 2011 Link to this post

    Hi Stefan,

    I added a ParentRow reference in the DataItem class. Could you please give it a try and let us know if it fits in your scenario ?

    Regards,
    Petar Mladenov
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  8. Andreas
    Andreas avatar
    36 posts
    Member since:
    Sep 2008

    Posted 14 Jun 2011 Link to this post

    Hi,

    this approach works fine. Thanks for your help.

    Kind regards,
    Stefan
  9. saw
    saw avatar
    29 posts
    Member since:
    Jun 2014

    Posted 05 Aug 2014 Link to this post

    Hi,

    Thanks a lot for the attached files and examples given in here. Using those examples i solved lot of  problems in my project, but my click command not firing when i click menu item ? i am using MVVM pattern and Icommand interface for commanding.
    Any help !!!
  10. saw
    saw avatar
    29 posts
    Member since:
    Jun 2014

    Posted 05 Aug 2014 Link to this post

    And my RadContextMenu is in RadGridView. Data load perfectly.
    <telerik:RadContextMenu.ContextMenu>
                            <telerik:RadContextMenu x:Name="ContactGridContextMenu" Opened="ContactGridContextMenu_Opened"                     >
    <telerik:RadMenuItem Header="New contact" Command="{Binding AddContactsCommand}"/>
     <telerik:RadMenuItem Header="Edit contact" Command="{Binding EditContactsCommand}" />
      <telerik:RadMenuItem Header="Tag as " ItemsSource="{Binding PlannerTag,Mode=TwoWay}">                                
                <telerik:RadMenuItem.ItemTemplate>
                         <DataTemplate telerik:ContainerBinding.ContainerBindings="{StaticResource TagMenuBindings}" >
                               <TextBlock Text="{Binding TagName,Mode=TwoWay}"/>
                          </DataTemplate>
                         </telerik:RadMenuItem.ItemTemplate>                               
         </telerik:RadMenuItem>
    </telerik:RadContextMenu>
    </telerik:RadContextMenu.ContextMenu>

     
    my UserControl.Resources element details,in my View Model i have AddTagCommand, implements using Icommnad interface.

    <UserControl.Resources>
            <telerik:ContainerBindingCollection x:Key="TagMenuBindings">
                <telerik:ContainerBinding Binding="{Binding AddTagCommand,Mode=TwoWay,RelativeSource={RelativeSource FindAncestor,AncestorType=UserControl}}" PropertyName="Command" />
                <telerik:ContainerBinding Binding="{Binding}" PropertyName="CommandParameter" />
            </telerik:ContainerBindingCollection>
             
            <local:EnumDisplayConverter x:Key="enumDisplayConverter" />       
        </UserControl.Resources>

    RadGridView also have ItemSource.
  11. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 07 Aug 2014 Link to this post

    Hi Saw,

    Telerik ContainerBindings should be used only in SIlverlight 4 because in this version there is no style binding mechanism. Since SL 5, you can use Style Bindings and completely avoid ContainerBindings. On the other hand, I think you can re-design your ViewModels and View to avoid binding to Relative Source with Find Ancestor. Is it possible for you to try Style Bindings adn SL 5, if the issue still persists can you send us a small runnable sample that we can investigate ? It's best to open a new support thread with the project attached, this way you will be able to take full advantage of our 24 hours guaranteed support response. Thank you in advance for your cooperation.

    Regards,
    Petar Mladenov
    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.
     
Back to Top
DevCraft banner