This is a migrated thread and some comments may be shown as answers.

RadMenuItem and its Header are clickable

9 Answers 301 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Andreas
Top achievements
Rank 1
Andreas asked on 24 May 2011, 10:13 AM
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

9 Answers, 1 is accepted

Sort by
0
Tina Stancheva
Telerik team
answered on 26 May 2011, 03:53 PM
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
0
Andreas
Top achievements
Rank 1
answered on 31 May 2011, 09:33 AM
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
0
Tina Stancheva
Telerik team
answered on 03 Jun 2011, 09:57 AM
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
0
Andreas
Top achievements
Rank 1
answered on 06 Jun 2011, 10:24 AM
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
0
Accepted
Petar Mladenov
Telerik team
answered on 09 Jun 2011, 12:12 PM
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
0
Andreas
Top achievements
Rank 1
answered on 14 Jun 2011, 09:39 AM
Hi,

this approach works fine. Thanks for your help.

Kind regards,
Stefan
0
saw
Top achievements
Rank 1
answered on 05 Aug 2014, 10:34 AM
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 !!!
0
saw
Top achievements
Rank 1
answered on 05 Aug 2014, 12:28 PM
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.
0
Petar Mladenov
Telerik team
answered on 07 Aug 2014, 08:09 AM
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.
 
Tags
Menu
Asked by
Andreas
Top achievements
Rank 1
Answers by
Tina Stancheva
Telerik team
Andreas
Top achievements
Rank 1
Petar Mladenov
Telerik team
saw
Top achievements
Rank 1
Share this question
or