Submenus on mobile devices

[ToltingColtAcres]

I have an ASP.NET webforms application which has been in production for a while that uses a hierarchical menu structure to allow the user to select the business "level" they wish to operate on (Area, District, and Territory). Most people have used their desktops to access this application.

The menu is set up to allow people to click on the "area", or "district", or "territory" they wish to operate on. For example, they can click on the area to select the entire area, or they can hover over the area (on their laptop) to 'drill down' to the district level, and then click on a district, or hover over a district to then drill down to the territory level within the district to click on and select a territory.

A client side click event is present to process the selection.

The problem I am experiencing is on mobile devices one cannot "hover" over the menu item to 'drill down'. It is necessary to "click" on a menu item to drill down. However, when you click on the item, even if it is the little arrow on the right-hand side, the click event kicks off and you end up selecting a whole area (it is impossible to drill down further than the area level, since any time you "click" on the little arrow to attempt to drill down to the district level, the click event fires off and selects the area.

Can someone provide some guidance as to how to replicate the functionality I see on a laptop on a mobile device? Everything works great on a laptop or PC, because you can 'hover' with your mouse over the area/district menu options and you get the correct sub-menu fly-out to the right... but there's no such hover capability I'm aware of on an ios or android device.

Thanks!

[ToltingColtAcres]

I should add the menu does not work as expected in Safari... however, if I use chrome on IOS, it does work okay (although the menu appears different (the box w/ 3 lines in the upper left corner of the screen rather than a series of main menu options across the top of the screen)

[ToltingColtAcres]

Bump. Anyone?

[Peter Milchev]

Hello,

The difference between the menus in both screenshots is that one is in Lightweight render mode, while the other is in Mobile render mode. 

The iPad devices impersonate a desktop MAC device by default, so it tricks the browser to think that the iPad is actually a desktop device instead of a mobile one.

With that said, the device detection cannot understand that the iPad is a "mobile device", so it resolves the Auto render mode to Lightweight instead of Classic. 

One possible workaround, although not so pretty, is sending that information from the client to the server. For example, if you identify the iPad on the client, you can add a cookie stating this is an iPad with "desktop mode" enabled. Then, on the server-side, you can check for that cookie and set manually the RenderMode to Mobile.

You can see how to determine if a device is an iPad by checking the agent string and navigator.maxTouchPoints. If the agent string says it is a MAC, but navigator.maxTouchPoints are more than 0, then this is an iPad impersonating a MAC(because there are no touch-enabled MAC devices yet).

• https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/contextmenu-not-working-ipad-ios13-safari#suggested-workarounds 

Regards,
Peter Milchev
Progress Telerik

[ToltingColtAcres]

I have tried manually specifying RenderModes of Lightweight, Classic, and Native. All 3 exhibit the same symptom.

Manually specifying a Mobile Rendermode will see Safari work, but with the "chrome" 3-line menu rather than the traditional-looking menu.

I am concluding from your reply there is no mechanism to get the traditional appearance to function correctly on an iPad?

[Peter Milchev]

The Sandwich menu is the RadMenu with resolved Mobile render mode, while the full page width menu is RadMenu with resolved Lightweight render mode. If you need to show the latter menu at all times, please set the render mode to Lightweight instead of Auto. 

If you are not using the latest version, I advise using the workaround from the KB above: https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/contextmenu-not-working-ipad-ios13-safari#suggested-workarounds   

Regarding the detecting of the iPad with Desktop mode enabled, we are currently not aware of any reliable way to do that on the server-side only.  

[ToltingColtAcres]

Thank you for the reply, unfortunately, the "workaround" you mention does not appear to work. I am on ios 14.5.1 and am runnning the 2021.2.511 version of the controls.

I'll post the test code I am running below. Basically what happens is tapping on the > on area level immediately selects the area rather than bringing up the district menu.

[ToltingColtAcres]

Sample Code:

TestMenu.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestMenu.aspx.cs" Inherits="TestWeb.TestMenu" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 <meta http-equiv="Pragma" content="no-cache" />
 <meta http-equiv="Expires" content="0" />
 <title>
  <asp:Literal runat="server" ID="TitleLabel" />
 </title>
 <style type="text/css">
  html, body {
   font-family: Segoe UI;
   font-size: 12px;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
  }

  div#content {
   width: 100%;
   height: 100%;
  }

  .navigation-menu {
   vertical-align: middle;
   width: 100%;
   border-spacing: 0;
   border-collapse: collapse;
  }

  .skin-chooser {
   vertical-align: middle;
   text-align: right;
   width: 150px;
  }

  .master-table {
   width: 100%;
  }

  .master-table-left {
   width: 650px;
   text-align: left;
   vertical-align: middle;
  }

  .master-table-right {
   width: 250px;
   text-align: right;
   vertical-align: middle;
   font-family: "Segoe UI";
   font-size: small;
  }

  .master-table-center {
   width: 100px;
   text-align: center;
   vertical-align: middle;
   font-family: "Segoe UI";
   font-size: small;
  }

  .master-table-time {
   text-align: center;
   vertical-align: middle;
   font-family: "Segoe UI";
  }

  .master-table-gps {
   font-size: xx-small;
  }

  .centered {
   text-align: center;
  }
 </style>
 <script type="text/javascript">
  // iPad with enabled "Request Desktop Site" 
  if ($telerik.isTouchDevice == false && navigator.maxTouchPoints > 0 && Telerik.Web.Platform.mac) {
   $telerik.isTouchDevice = true;
   Telerik.Web.Platform.ipad = true;
   Telerik.Web.Platform.mac = false;
  }
 </script>
</head>
<body>
 <form id="MasterForm" runat="server">
  <telerik:RadScriptManager ID="RadScriptManager_Master" runat="server" EnablePageMethods="true" AsyncPostBackTimeout="0">
   <Scripts>
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
   </Scripts>
  </telerik:RadScriptManager>
  <telerik:RadWindowManager runat="server" ID="RadWindowManager" Behaviors="Close, Move" />
  <telerik:RadCodeBlock runat="server" ClientIDMode="AutoID" EnableViewState="true" ID="RadCodeBlock_Master">
   <script type="text/javascript">

    function RadMenu_Master_OnClientItemClicking(sender, eventArgs) {
     var value = eventArgs.get_item().get_value();
     if (value !== null && value !== undefined && value.substr(0, 1) === "~") {
      var text = (value.substr(1, 1).toUpperCase() === "A" ? "Area " : (value.substr(1, 1).toUpperCase() === "D" ? "District " : "Territory ")) + value.substr(2);
      alert("You selected " + text);
      eventArgs.set_cancel(true);
     }
    }
   </script>
  </telerik:RadCodeBlock>
  <asp:Table runat="server" CssClass="master-table">
   <asp:TableRow>
    <asp:TableCell ID="MasterTableLeft" runat="server" CssClass="master-table-left">
     <telerik:RadMenu ID="RadMenu_Master" runat="server" CollapseAnimation-Type="None" OnClientItemClicking="RadMenu_Master_OnClientItemClicking"
                      RenderMode="Lightweight"
                      >
      <Items>
       <telerik:RadMenuItem Text="Select Level">
        <Items>
         <telerik:RadMenuItem Text="Area 1" Value="~a1">
          <Items>
           <telerik:RadMenuItem runat="server" Text="District 1" Value="~d1">
            <Items>
             <telerik:RadMenuItem runat="server" Text="Territory 1" Value="~t1"></telerik:RadMenuItem>
             <telerik:RadMenuItem runat="server" Text="Territory 2" Value="~t2"></telerik:RadMenuItem>
            </Items>
           </telerik:RadMenuItem>
           <telerik:RadMenuItem runat="server" Text="District 2" Value="~d2">
            <Items>
             <telerik:RadMenuItem runat="server" Text="Territory 3" Value="~t3"></telerik:RadMenuItem>
             <telerik:RadMenuItem runat="server" Text="Territory 4" Value="~t4"></telerik:RadMenuItem>
            </Items>
           </telerik:RadMenuItem>
          </Items>
         </telerik:RadMenuItem>
         <telerik:RadMenuItem Text="Area 2" Value="~a2">
          <Items>
           <telerik:RadMenuItem runat="server" Text="District 3" Value="~d3">
            <Items>
             <telerik:RadMenuItem runat="server" Text="Territory 5" Value="~t5"></telerik:RadMenuItem>
             <telerik:RadMenuItem runat="server" Text="Territory 6" Value="~t6"></telerik:RadMenuItem>
            </Items>
           </telerik:RadMenuItem>
           <telerik:RadMenuItem runat="server" Text="District 4" Value="~d4">
            <Items>
             <telerik:RadMenuItem runat="server" Text="Territory 7" Value="~t7"></telerik:RadMenuItem>
             <telerik:RadMenuItem runat="server" Text="Territory 8" Value="~t8"></telerik:RadMenuItem>
            </Items>
           </telerik:RadMenuItem>
          </Items>
         </telerik:RadMenuItem>
         <telerik:RadMenuItem Text="Area 3" Value="~a3">
          <Items>
           <telerik:RadMenuItem runat="server" Text="District 5" Value="~d5">
            <Items>
             <telerik:RadMenuItem runat="server" Text="Territory 9" Value="~t9"></telerik:RadMenuItem>
             <telerik:RadMenuItem runat="server" Text="Territory 10" Value="~t10"></telerik:RadMenuItem>
            </Items>
           </telerik:RadMenuItem>
           <telerik:RadMenuItem runat="server" Text="District 6" Value="~d6">
            <Items>
             <telerik:RadMenuItem runat="server" Text="Territory 11" Value="~t11"></telerik:RadMenuItem>
             <telerik:RadMenuItem runat="server" Text="Territory 12" Value="~t12"></telerik:RadMenuItem>
            </Items>
           </telerik:RadMenuItem>
          </Items>
         </telerik:RadMenuItem>
        </Items>
       </telerik:RadMenuItem>
      </Items>
     </telerik:RadMenu>
    </asp:TableCell>
    <asp:TableCell ID="MasterTableCenter" runat="server" CssClass="master-table-center">
     <asp:Table runat="server">
      <asp:TableRow>
       <asp:TableCell HorizontalAlign="center" VerticalAlign="middle">
       </asp:TableCell>
       <asp:TableCell HorizontalAlign="center" VerticalAlign="middle">
       </asp:TableCell>
      </asp:TableRow>
     </asp:Table>
    </asp:TableCell>
    <asp:TableCell ID="MasterTableRight" runat="server" class="master-table-right">
     <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" PersistenceMode="Cookie" />
    </asp:TableCell>
   </asp:TableRow>
  </asp:Table>
 </form>
</body>
</html>

TestMenu.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace TestWeb
{
 public partial class TestMenu : System.Web.UI.Page
 {
  protected void Page_Load(object sender, EventArgs e)
  {
  }
 }
}

[Peter Milchev]

Hi, sorry for the late reply. Can you check if placing the workaround code somewhere under the ScriptManager would make any difference?