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

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

7 Answers 280 Views

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

Jeremy Yoder asked on 11 Feb 2013, 05:33 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

7 Answers, 1 is accepted

answered on 14 Feb 2013, 04:25 PM

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.

answered on 27 Jun 2013, 08:41 PM

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.