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