Telerik Forums / UI for Silverlight Forum / Menu /

Problem when using ClickToOpen with long sub menus

Telerik UI for Silverlight
Resources Buy Try

4 posts, 1 answers

hwsoderlund

419 posts

Member since:
Aug 2006

Posted 03 Apr 2013 Link to this post

When sub menus are very long they will be pushed up and rendered on top of the parent menu item. This means that when the root menu item is clicked (mousedown) the sub menu opens and one of its items will now be where the mouse pointer is. When the mouse is released as part of the click on the parent menu item, that is interpreted as a click on the sub menu item, when in fact all the user did was click the root item to open the sub menu. It is very easily reproduced, see the code below. Is there any way you could give us control over which event the menu listens to when ClickToOpen is True? That way we could set the menu to open onmouseup instead of onmousedown. Or perhaps you could keep the ClickToOpen property as is and add another property, something like ClickToOpenEvent where we could specify if we want onmousedown or mouseup. Many of our users are using netbooks with low rez screens (too small for many of our menus) and this problem occurs quite frequently.

Xaml:

<UserControl x:Class="RadMenuTest01.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

             mc:Ignorable="d"

             d:DesignHeight="300"

             d:DesignWidth="400">

    <Grid x:Name="LayoutRoot"

          Background="White">

        <telerik:RadMenu ItemClick="RadMenu_ItemClick_1"

                         ClickToOpen="True"

                         Margin="100">

            <telerik:RadMenu.Items>

                <telerik:RadMenuItem Header="Item">

                    <telerik:RadMenuItem.Items>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                        <telerik:RadMenuItem Header="Item"></telerik:RadMenuItem>

                    </telerik:RadMenuItem.Items>

                </telerik:RadMenuItem>

            </telerik:RadMenu.Items>

        </telerik:RadMenu>



    </Grid>

</UserControl>

And code-behind:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace RadMenuTest01

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

        }

        private void RadMenu_ItemClick_1(object sender, Telerik.Windows.RadRoutedEventArgs e)

        {

            MessageBox.Show("Clicked");

        }

    }

}
Answer
Rosen Vladimirov
Admin

640 posts

Posted 03 Apr 2013 Link to this post

Hi Henrik,

Thank you for pointing this problem. In fact we have made several improvements on this behavior and they will be included in our 2013 Q1 SP1 (it should be available for download later today or tomorrow). With these improvements, when you click on RadMenu and you release the mouse while the animation is still going, the items inside will not be clicked. The only problem will occur if you press the mouse button over RadMenu, it will open (animation is over) and after that you release the mouse (while you are over any of the submenu items).
We have planned more improvements and in the near future we'll add ScrollViewer, so you will be able to define the size of the popup that will be opened and prevent it from showing over RadMenu.

Could you try our Service Pack release (as I said, it should be available for download later today or tomorrow) and inform us if it helps?

All the best,
Rosen Vladimirov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
hwsoderlund

419 posts

Member since:
Aug 2006

Posted 03 Apr 2013 Link to this post

Sounds good. I will try the service pack and report back here.
hwsoderlund

419 posts

Member since:
Aug 2006

Posted 12 Apr 2013 Link to this post

Yes, the issue is solved now. Thank you.

Problem when using ClickToOpen with long sub menus

hwsoderlund

Rosen Vladimirov

hwsoderlund

hwsoderlund