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

Clicking kills menu

9 Answers 52 Views

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

Andreas asked on 19 Sep 2014, 06:17 AM

Hi,

We are using ExpandDelay in combination with ClickToOpen.
When users that are in a hurry clicks around in menues, it sometimes ends up in a state where sub-items can't be opened anymore.

Sample:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="menu.aspx.vb" Inherits="TestaTredjepartWeb.menu" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="s" runat="server">

</asp:ScriptManager>

<div>

<table>

<tr>

<td>

<telerik:RadMenu ID="menu" runat="server" RenderMode="Lightweight" ClickToOpen="true" ExpandDelay="1000">

<Items>

<telerik:RadMenuItem Text="Test1" Value="item1">

<Items>

<telerik:RadMenuItem Text="1"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="2">

<Items>

<telerik:RadMenuItem Text="22"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="23"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="3"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Test2" Value="item2">

<Items>

<telerik:RadMenuItem Text="1"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="3"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

In this sample do the following:

Click the Test2 menu item to open it
Move the cursor fast to Test1 item and click it before it open by itself (within 1 second since ExpandDelay=1000)
Keep the mouse over the Test1 so it opens by itself
When this has happened, the sub-items below Test1 (2->) can't be opened in any way until the menu is closed by clicking beside the menu!

You might think that this doesn't happen often, but for some users it actually does.
One other thing is that I think the second click should open it directly without waiting for the expandelay...

Regards
Andreas

9 Answers, 1 is accepted

answered on 26 Sep 2014, 12:10 PM

Hi,

The expanddelay is only set because of sub-items.
With sub-items, the radmenu is almost impossible to use with a mouse-pointer without the expanddelay.
When adding a little bit more sub-items like the following sample:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="menu.aspx.vb" Inherits="TestaTredjepartWeb.menu" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="s" runat="server">

</asp:ScriptManager>

<div>

<table>

<tr>

<td>

<telerik:RadMenu ID="menu" runat="server" RenderMode="Lightweight" ClickToOpen="true" >

<Items>

<telerik:RadMenuItem Text="Test1" Value="item1">

<Items>

<telerik:RadMenuItem Text="1"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="2">

<Items>

<telerik:RadMenuItem Text="21"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="22"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="23"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="3">

<Items>

<telerik:RadMenuItem Text="31"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="32"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="33"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Test2" Value="item2">

<Items>

<telerik:RadMenuItem Text="1"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="3"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

When moving the mouse over Test1->2, and then you want to click an item below 2 (for example 23), then users tend to move the mouse in a straight line from 2 to 23 which makes the mouse move over the Test1->3 item that is below Test1-2. When moving the mouse in this way, the Test1->3 item will open instantly instead!!!

All end users I have seen does this same "mistake" (including myself), but if there is an expanddelay, the mouse wont trigger the Test1->3 to open since the user will move over that item within a second.

Regards
Andreas

answered on 01 Oct 2014, 11:48 AM

Hello Andreas,

Thank you for providing some detailed information about your scenario.

Indeed the only solution for the requirement described in your last response is to set some ExpandDelay. Otherwise if you accidentally hover on Test1->3 while moving the mouse in a straight line from 2 to 23 it will show the children of 3 immediately.

I am afraid that enabling the ClickToOpen option and setting the ExpandDelay have some specifics. For example if you have two root items and the second one is opened you can either only move the mouse over the other root item or move the mouse over the other item and click on that item once the item is expanding or it is already expanded. Moving the mouse over the first item and click immediately will cause some unexpected behavior described in your initial post and could not be overcome.

In this case the only solution will be setting ExpandDelay but not enabling the ClickToOpen functionality as shown below:
//markup code

<telerik:RadMenu ID="RadMenu1" runat="server" RenderMode="Lightweight" ExpandDelay="1000">

Regards,
Boyan Dimitrov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 14 Oct 2014, 07:46 AM

Hi,

This is not what I would expect from a menu control. If you look at the behavior of all menus in a normal Windows application that has a classic menu, they do work like this:
1. Click to open (no menus in any Windows program I can find, opens menus just by hover)
2. The root level has NO expand delay, once the menu is clicked the root level menus opens instantly when mouse hover.
3. Sub-menus always has an expand delay, otherwise it would be almost impossible to navigate.

Anyway, we have managed to overcome the issue.
A major prototype-hack is needed like this (added as script last on page):

Telerik.Web.UI.RadMenu.prototype._onItemMouseOver = function (e)

{

var $T = Telerik.Web.UI;

var item = this._extractItemFromDomElement(e.eventMapTarget),

parent,

openedItem,

target = e.target;

if (!item.get_enabled())

{

return true;

}

//Call preventDefault and return because on touch enabled device

//the mouse over event is fired when the menu item is touched.

if ($T.RadMenu._isTargetToggleButton(target))

{

if (e.preventDefault)

{

e.preventDefault();

}

return false;

}

item._preventClose();

if (this.get_clickToOpen() && !this.get_clicked())

{

return true;

}

if (item._state == $T.RadMenuItemState.Open ||

item._state == $T.RadMenuItemState.AboutToOpen)

{

return true;

}

parent = item.get_parent();

openedItem = parent.get_openedItem();

var expandDelay;

if (item.get_level() === 0)

expandDelay = 0;

else

expandDelay = this.get_expandDelay();

if (openedItem && openedItem != item)

{

openedItem._clearTimeout();

openedItem._state = $T.RadMenuItemState.AboutToClose;

openedItem._setTimeout(function ()

{

openedItem.close();

openedItem._timeoutRef = null;

}, expandDelay);

}

if (!item._shouldOpen())

{

return true;

}

item._state = $T.RadMenuItemState.AboutToOpen;

item._setTimeout(function ()

{

item.open();

item._timeoutRef = null;

}, expandDelay);

return true;

};

The important code in this is that the expanddelay is set to zero on root level:

var expandDelay;

if (item.get_level() === 0)

expandDelay = 0;

else

expandDelay = this.get_expandDelay();

Would be really nice with an option on the menu to disable the expandDelay on the root level (should even be default if clicktoopen...)!!!

These large hacks are really bad, but in this case we really think it is worth it. But of course we really think that this should be solved by telerik in some way!

Regards
Andreas

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Clicking kills menu

9 Answers, 1 is accepted