So I threw together about the most simple test I could (there's literally nothing on the page except the hamburger) to see what it would look like on a mobile device, and it works just fine on my desktop (hamburger displays, clicking with mouse expands the navigation below) but, as soon as I check it on any mobile device or using the developer tools in Chrome, the hamburger is still displayed but pressing on it does nothing. I've removed nothing from the code below and the only additional change I've made to the site was to include the reference to the sitemap within the Web.config file. Any ideas as to why such a simple example is not being kind to me?
ASPX Page
______________________________________________________
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="TestSite.Mobile.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadMenu ID="RadMenu1" RenderMode="Mobile" runat="server" ShowToggleHandle="true" Height="115px" Skin="MetroTouch" CssClass="t-rwd-menu-mobile" DataSourceID="dsMobileSitemap"></telerik:RadMenu>
<asp:SiteMapDataSource ID="dsMobileSitemap" runat="server" ShowStartingNode="False" SiteMapProvider="mobileSitemap" />
</form>
</body>
</html>
ASPX.CS Page
______________________________________________________
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
namespace TestSite.Mobile
{
public partial class test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
mobile.sitemap
______________________________________________________
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/" title="home" description="Home">
<siteMapNode url="~/Mobile/Default.aspx" title="home" description="Home" />
<siteMapNode url="~/Mobile/Contact.aspx" title="contact us" description="Contact Us" />
<siteMapNode url="~/Mobile/DemoRequest.aspx" title="request a demo" description="Request a Demo" />
</siteMapNode>
</siteMap>
3 Answers, 1 is accepted
Do you have issues expanding the RadMenu items only in this particular project when binding it to sitemap? For instance, is the following demo working correctly at your side?
Have you added the SiteMapProvider's settings to your web.config? It should look similar to the following:
<siteMap> <providers> <add name="mobileSitemap" description="Testing mobile menu with sitemap" type="System.Web.XmlSiteMapProvider" siteMapFile="mobile.sitemap"/> </providers></siteMap>Regards,
Ivan Danchev
Telerik
Rank 1
Thanks for the reply Ivan. To answer your questions:
- Yes, the demo works just fine on the same mobile devices that aren't working with the code I provided above which leads me to believe that I've missed some little detail specific to a mobile implementation.
- I've tested this example both using a sitemap file and not using a sitemap file and I get the same results.
- Yes, the web.config file had been updated to include the reference to the sitemap file.
I've used the RadMenu in other projects and never had a problem with it but this is my first implementation attempting to get it to work for a mobile site, this is also my first use of the 2015 controls. I haven't updated my other projects that leverage RadMenu yet and quite frankly that's actually a bit of a concern for me now that I'm having this issue with this mobile attempt.
Could please elaborate on the following points, which could help determine the cause for that RadMenu behavior:
- The .NET version you are using.
- What device operational system and browser have you reproduced the issue in?
- Are there any js errors when running the page or trying to expand the menu?
- There is a custom CSS class set the the RadMenu ("t-rwd-menu-mobile"). Could you try commenting out the rules associated with it or all custom CSS on your page and check if this has any effect?
- Could you please post a sample project, including the content of the web.config file so we can test it locally?
Regards,
Ivan Danchev
Telerik