Menu not closing on iPad

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

    Posted 25 Jun 2014 Link to this post

    Hi,

    When using ItemTemplates, the menu wont close when tapping on a root item!

    Example:
    <%@ 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="22"></telerik:RadMenuItem>
                                                    <telerik:RadMenuItem Text="23"></telerik:RadMenuItem>
                                                </Items>
                                            </telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="3"></telerik:RadMenuItem>
                                        </Items>
                                        <ItemTemplate>
                                            TEst1
                                        </ItemTemplate>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem IsSeparator="true" Value="separator">
                                    </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>

    Do the following on iPad:
    Tap the Test1 menu item to open.
    Tap the Test1 menu item again to close it -> wont work.

    The Test2 menu item works just fine!

    The sample works just fine on desktop clients (and even MS Surface tablets), but not on iPad!

    Regards
    Andreas
  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 25 Jun 2014 Link to this post

    Hi,

    I was able to replicate the reported behavior. I would like to clarify that this scenario is still not supported on iOS and Android browsers.

    However, I have found one possible workaround for a scenario such as your, where there is ItemTemplate only on root items, would be to set ShowToggleHandle="true" and hide the toggle handle with CSS:

    <telerik:RadMenu ID="menu" runat="server" RenderMode="Lightweight" ClickToOpen="true" ShowToggleHandle="true">
         <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>
                 <ItemTemplate>
                     Test1
                 </ItemTemplate>
             </telerik:RadMenuItem>
             <telerik:RadMenuItem IsSeparator="true" Value="separator">
             </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>


    <style>
        .rmToggle {
            display: none;
        }
     
        .rmGroup .rmToggle {
            display: block;
        }
    </style>

    Please note that if you add ItemTemplate to a sub-item which has child items, in this case the toggle handle of the corresponding item would not be rendered and visible until you tap that item. Thus, the suggested workaround would fit best a scenario like your where ItemTemplate is applied to a root item.

    Regards,
    Dimitar
    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 25 Jun 2014 in reply to Dimitar Link to this post

    Hi,

    I also tried the ShowToggleHandle="true", but then it will be much harder to expand sub-items since you must hit the small arrow instead of tapping on the entire item (expanding Test1/2 and displaying 22, 23 in the sample).

    Found the following workaround instead:
    Telerik.Web.UI.RadMenuItem.prototype._preventDefaultUnderMobile = function (e)
            {
                if (!e)
                {
                    return false;
                }
     
                //var preventDefault = !(this._shouldNavigate() || $(this.get_element()).hasClass("rmTemplate"));
                var preventDefault = !(this._shouldNavigate());
     
                if (preventDefault)
                {
                    e.preventDefault();
                } else if (!this.get_menu().get_showToggleHandle())
                {
                    if (this._shouldOpen())
                    {
                        if (this.get_isOpen())
                        {
                            return true;
                        } else
                        {
                            e.preventDefault();
                        }
                    }
                }
     
                return false;
            };

    The row that is commented out is replaced...
    Don't know if there are side-effects of this, but in our case it seems to work really good!

    Regards
    Andreas
Back to Top