RadMenu fails with Mobile Devices (iPhone and Android), need to disable Hovering

8 posts, 0 answers
  1. Jeremy Yoder
    Jeremy Yoder avatar
    131 posts
    Member since:
    Dec 2009

    Posted 11 Feb 2013 Link to this post


    The page below shows the issue. When I browse to it from a mobile device, such as iPhone or Android, the menus will not drop down. It's appears there's a conflict with hovering vs clicking.

    I have other code determining if the user is browsing from a mobile device or not. Knowing that, what code I can apply to my menu that will disable hovering and only make menus drop down when clicking?


    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
     
     
    <body style="background-color:White">
     
        <script language="javascript" type="text/javascript">
     
     
            function MenuItemClicking(sender, args) {
     
                var item = args.get_item();
     
                if (item.get_level() === 0) {
                    args.set_cancel(true);
                    return;
                }
     
                alert('Menu item selected');
     
            }
     
     
        </script>
     
     
        <form id="form1" runat="server">
     
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true">
        </telerik:RadScriptManager>
     
     
        <div>
         
            <telerik:RadMenu ID="RadMenu1" runat="server" BorderStyle="None" OnClientItemClicking="MenuItemClicking">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Data" TabIndex="-1">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Option 1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Option 2">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Option 3">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Info" TabIndex="-1">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Option 4">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Option 5">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Help" TabIndex="-1">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Option 6">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Option 7">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
     
        </div>
        </form>
    </body>
    </html>

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1864 posts

    Posted 14 Feb 2013 Link to this post

    Hello,

    In order to avoid any confusions I would like to clarify that under mobile devices clicking on a RadMenuItem is opening and showing its child items. In the provided code you are canceling the click event from executing and this prevent the drop down functionality as well. Could you please elaborate a bit more on your scenario and  clarify what exactly functionality you are trying to achieve? Any additional information would be very helpful.

    Regards,
    Boyan Dimitrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Jeremy Yoder
    Jeremy Yoder avatar
    131 posts
    Member since:
    Dec 2009

    Posted 14 Feb 2013 Link to this post


    You inadvertently answered my question. My simplified version didn't do the entire issue justice since removing the .set_cancel does make it work, but it broke other functionality we needed which had to do with hovering and certain menus behaviors. Yet I was able to get around everything, so I'll not bore you with the details.

    That makes this thread a non-issue, so delete it if you want. Thanks.
  4. kurt place
    kurt place avatar
    9 posts
    Member since:
    Aug 2012

    Posted 27 Jun 2013 Link to this post

    Please, bore us with the details!  I have a similar issue.
  5. Jeremy Yoder
    Jeremy Yoder avatar
    131 posts
    Member since:
    Dec 2009

    Posted 27 Jun 2013 Link to this post


    I'll do my best to bore you. ;)

    It was a while ago, but I made this note in my code: "Before I was manually canceling menus, but it made parent menus not work on mobile devices that can't hover mouse to make menu drop. Instead, better solution is to set PostBack="false" for parent and special menus right on the control."

    So it appears that now in my control, I have PostBack="false" on my parent RadMenuItems and on any others that need to kick off code in the javascript function. And in the javascript, I'm no longer checking for .get_level or calling .set_cancel.

    Hope that helps.

  6. kurt place
    kurt place avatar
    9 posts
    Member since:
    Aug 2012

    Posted 27 Jun 2013 Link to this post

    Thank you very much.  I did find this out shortly after I asked but you have just confirmed it.  The post I found had someone from Telerik telling someone else to set the postback = false programmatically on menu item creation but that didn't work for me since my items were created in the aspx file.  but then the thought hit me to set the postback value in the aspx file as well and it worked.

    Hopefully we are helping the other fools running into the same thing in the future.
  7. Benjamin
    Benjamin avatar
    1 posts
    Member since:
    Dec 2016

    Posted 08 Dec 2016 Link to this post

    I have a similar error with the menu on RenderMode="Mobile". The menu for the mobile won't drop down if I click on the menu icon.

    Need a solution ASAP!

  8. Nencho
    Admin
    Nencho avatar
    1533 posts

    Posted 12 Dec 2016 Link to this post

    Hello Benjamin,

    I assume that you had go trough the recommended suggestion in this thread and the problem still persist. This is why, I would like to ask you to elaborate a bit more on your scenario - provide us with steps for the replication of the issue and the current implementation that you have. Hence, we will be able to replicate it locally and suggest you the proper implementation or a workaround.

    Regards,
    Nencho
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Back to Top