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

7 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
    1746 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. 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.
  5. 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.
  6. 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.

  7. 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.
  8. Benjamin
    Benjamin avatar
    1 posts
    Member since:
    Dec 2016

    Posted 2 days and 5 hours ago 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!

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