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

Menu not closing on iPad

2 Answers 125 Views

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

Andreas asked on 25 Jun 2014, 06:58 AM

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>

<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="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 Answers, 1 is accepted

answered on 25 Jun 2014, 03:04 PM

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.

answered on 25 Jun 2014, 08:21 PM

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