RadMenuItem keeps IsHighlighted

7 posts, 0 answers
  1. Mark
    Mark avatar
    5 posts
    Member since:
    Apr 2009

    Posted 07 Oct 2010 Link to this post

    Taking the below code as an example, the steps involved in performing a certain task are as follows:

    1. Open Drop Down Button
    2. Select Change Widget menu item --> Sum menu opens.
    3. Select item within submenu which executes a task on my ViewModel (Command binding)
    4. The view model sets its IsOpen  property to false, therfore closing the drop down button due to the IsOpen binding.
    5. Reopen the drop down button --> the Change Widget menu item is highlighted. In order to view the submenu, I need to select another menu item then go back to the item that was focused.

    Is there a way to unhighlight your a menu item after you have clicked on an item within it's submenu?

    <telerik:RadDropDownButton ClickMode="Press"
                            Content="Edit" Background="Transparent"
                            CloseOnEscape="True"
                            IsOpen="{Binding IsMenuOpen, Mode=TwoWay}" >
                            <telerik:RadDropDownButton.DropDownContent>
                                <telerikNavigation:RadContextMenu InheritDataContext="True">
                                    <telerikNavigation:RadMenuItem Header="Change Widget"
                                        ItemsSource="{Binding Widgets}">
                                    </telerikNavigation:RadMenuItem>
                                    <telerikNavigation:RadMenuItem x:Name="ActionMenuItem"
                                Header="Actions" ItemsSource="{Binding WidgetCommands}">
                                    </telerikNavigation:RadMenuItem>
                            </telerik:RadDropDownButton.DropDownContent>
                        </telerik:RadDropDownButton>

                    
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 12 Oct 2010 Link to this post

    Hello Mark,

    The RadContextMenu control is especially designed to be opened via an attached property. Therefore it should not be used as a content of a control.

    However the RadContextMenu looks pretty silky and sometimes we are working around the above statement. But this is a bit tricky approach - even if we can get a nice looking menu, it will be a half-functioning one. In your case, the limitation is that you cannot workaround the "IsHighlithed" issue.

    Therefore, in your scenario it is best not to use the RadContextMenu as a DropDownContent of the RadDropDownButton. Instead, you can insert a ListBox containing RadSplitButtons. For example, you can try something similar to the code bellow:
    <telerik:RadDropDownButton Content="Edit" Background="Transparent" CloseOnEscape="True"
                    x:Name="myDropDownButton" HorizontalAlignment="Center" VerticalAlignment="Center"
                    IsOpen="{Binding IsMenuOpen, Mode=TwoWay}" DropDownOpening="myDropDownButton_DropDownOpening"
                    Grid.Column="1">
                <telerik:RadDropDownButton.DropDownContent>
                    <ListBox>
                        <ListBoxItem>
                            <telerik:RadSplitButton Content="Change Widget" DropDownButtonPosition="Right"
                                    DropDownPlacement="Right">
                                <telerik:RadSplitButton.DropDownContent>
                                    <ListBox ItemsSource="{Binding Widgets}"
                                            ItemTemplate="{StaticResource MenuItemTemplate}" />
                                </telerik:RadSplitButton.DropDownContent>
                            </telerik:RadSplitButton>
                        </ListBoxItem>
                        <ListBoxItem>
                            <telerik:RadSplitButton Content="Change Widget" DropDownButtonPosition="Right"
                                    DropDownPlacement="Right">
                                <telerik:RadSplitButton.DropDownContent>
                                    <ListBox ItemsSource="{Binding Widgets}"
                                            ItemTemplate="{StaticResource MenuItemTemplate}" />
                                </telerik:RadSplitButton.DropDownContent>
                            </telerik:RadSplitButton>
                        </ListBoxItem>
                        <ListBoxItem>
                            <telerik:RadSplitButton Content="Change Widget" DropDownButtonPosition="Right"
                                    DropDownPlacement="Right">
                                <telerik:RadSplitButton.DropDownContent>
                                    <ListBox ItemsSource="{Binding Widgets}"
                                            ItemTemplate="{StaticResource MenuItemTemplate}" />
                                </telerik:RadSplitButton.DropDownContent>
                            </telerik:RadSplitButton>
                        </ListBoxItem>
                    </ListBox>
                </telerik:RadDropDownButton.DropDownContent>
            </telerik:RadDropDownButton>
    Please give this approach a try and let me know if it works for you.

    Sincerely yours,
    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. Mike Chidsey
    Mike Chidsey avatar
    8 posts
    Member since:
    Mar 2010

    Posted 08 Nov 2010 Link to this post

    You do realize that your own demo of the RadDropDownButton uses a RadContextMenu, right?  Why demonstrate that as a feature if it shouldn't be used like it?  I have the same problem, but if you only have 1 menu item with sub-menu.  The sub-menu will never open once it's been opened.
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 10 Nov 2010 Link to this post

    Hello Mike Chidsey,

    Yes, we did use the RadContextMenu as a demonstration of a Menu inside the RadDropDownButton. However, we modified our Buttons demos to implement a Menu using a ListBox rather than a RadContextMenu due to the previously mentioned restrictions. You can check out the beta version of our DropDownButton demo here.

    Have you tried the ListBox approach and does it work for you? If it doesn't, can you please elaborate on your scenario so that we can provide you with a better suited solution.

    Thank you in advance.

    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
  6. Mike Chidsey
    Mike Chidsey avatar
    8 posts
    Member since:
    Mar 2010

    Posted 11 Nov 2010 Link to this post

    Yeah, for my scenario I need sub-menus, so a listbox won't do.
  7. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 16 Nov 2010 Link to this post

    Hi Mike Chidsey,

    Can you please have a look at the attached solution and let me know if it can be implemented in your scenario?

    Best wishes,
    Tina Stancheva
    the Telerik team
    See What's New in RadControls for Silverlight in Q3 2010 on Tuesday, November 16, 2010 11:00 AM - 12:00 PM EST or 10:00 PM - 11:00 PM EST: Register here>>
  8. Mike Chidsey
    Mike Chidsey avatar
    8 posts
    Member since:
    Mar 2010

    Posted 16 Nov 2010 Link to this post

    I came up with a much easier solution -- I'm using a RadToggleButton and putting a dropdown indicator image in the content of the button.  The button's IsChecked property is bound to the ContextMenu's IsOpen property and I'm attaching the context menu to the button.  This is for a custom grid column header (see attached image for the output) -- so I create everything in code, but here's a snippet in XAML in case anyone is interested:

    <telerik:RadToggleButton IsChecked="{Binding IsOpen, ElementName=myMenu, Mode=TwoWay}">
        <telerik:RadToggleButton.Content>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="20" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="My Menu" />
                <Image Source="/Assets/btn-arrow.png" Grid.Column="1" />
            </Grid>
        </telerik:RadToggleButton.Content>
        <telerikNavigation:RadContextMenu.ContextMenu>
            <telerikNavigation:RadContextMenu x:Name="myMenu"
                     ItemsSource="{Binding MyMenuItems}"
                     ItemTemplate="{StaticResource MyMenuItemTemplate}">
                                                     
            </telerikNavigation:RadContextMenu>
        </telerikNavigation:RadContextMenu.ContextMenu>
    </telerik:RadToggleButton>
Back to Top
DevCraft banner