Clicking kills menu

10 posts, 0 answers
  1. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 19 Sep 2014 Link to this post

    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>
     
    <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:
    1. Click the Test2 menu item to open it
    2. Move the cursor fast to Test1 item and click it before it open by itself (within 1 second since ExpandDelay=1000)
    3. Keep the mouse over the Test1 so it opens by itself
    4. 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

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 23 Sep 2014 Link to this post

    Hello Andreas,

    Could you please elaborate a bit more on your scenario and explain what functionality you are trying to achieve? Once we know what is your goal we can give you some guidelines or idea how to accomplish it.

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 23 Sep 2014 in reply to Boyan Dimitrov Link to this post

    Hi,

    Well, what I want is that the menu does NOT stop working like it does.
    In the scenario above, the sub-items (Test1->2) can't be expanded at all until the user clicks besides the menu so that it closes the Test1 menu item and then start over again and click on Test1 to expand...

    Regards
    Andreas
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 26 Sep 2014 Link to this post

    Hello Andreas,

    Could you please clarify what functionality you are trying to achieve in general? Please explain why you want to set expand delay to the RadMenu? This way we can understand your scenario and help you in more efficient way. 


    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.

     
  6. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 26 Sep 2014 in reply to Boyan Dimitrov Link to this post

    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>
     
    <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
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 01 Oct 2014 Link to this post

    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.

     
  8. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 07 Oct 2014 in reply to Boyan Dimitrov Link to this post

    Well, that is not an option for us...
    We have menus all over the place in our application and if not using ClickToOpen, menus will expand and cover large areas of our application just when users move their mouse over the application.
    Isn't there some hack of some kind we can use to fix this issue?

    Regards
    Andreas
  9. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 09 Oct 2014 Link to this post

    Hello Andreas,

    I am afraid that there is no hack that will work for this case.
    As I mentioned enabling the ClickToOpen option and setting the ExpandDelay have some specifics and clicking immediately on root items might cause some unexpected behavior that could not be overcome.

    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.

     
  10. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 14 Oct 2014 in reply to Boyan Dimitrov Link to this post

    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


  11. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 16 Oct 2014 Link to this post

    Hello Andreas,

    We would like to thank you for sharing this solution with our community.


    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017