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

Drawer as Navigation Menu

3 Answers 632 Views

Drawer (Mobile)

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

Benjamin asked on 16 Dec 2015, 06:35 AM

drawer.zip

Hi,

I'm not sure if i posted in the correct sub forum. But i have a problem using drawer as navigation menu. The menu links need to open the page in current tab/page. My code works ok in desktop browser but when test it on ipad it's opened in new tab. I have tried using the code from telerik documentation something like this:

</ul>

</div>

but the page wouldn't open correctly and just looks like a blank page. What am i doing wrong? Please someone help me.

I have attached my sample code as reference. Thank you.

Ady

3 Answers, 1 is accepted

answered on 18 Dec 2015, 08:24 AM

Hi Benjamin,

The issue occurs because kendo.mobile.Application component is initialized in every view. This breaks the SPA concept of the mobile application.

In addition the ListView links in the drawer should not have data-rel="external" attribute.

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

<link href="@Url.Content("~/Content/kendo.common.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo.default.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/kendo.all.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

</head>

<body>

<div data-role="drawer" id="my-drawer">

<header data-role="header">

<div data-role="navbar" class="km-widget km-navbar">

<div class="km-leftitem">Menu</div>

<div class="km-view-title km-show-title km-fill-title"></div>

</div>

</header>

<ul data-role="listview" style="margin-top:50px;z-index:9999999 !important">

<li><a href="@Url.Action("Index", new { @Controller="Home"})" class="km-listview-link" data-role="listview-link">Index</a></li>

<li><a href="@Url.Action("About", new { @Controller="Home"})" class="km-listview-link" data-role="listview-link">About</a></li>

<li><a href="@Url.Action("Contact", new { @Controller="Home"})" class="km-listview-link" data-role="listview-link">Contact</a></li>

</ul>

</div>

@RenderBody()

</body>

</html>

@{

ViewBag.Title = "Home Page";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<div data-role="view" id="navbar-home" data-title="Home Page" data-stretch="true">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="hamburger" data-align="left"></a>

<span data-role="view-title">Home Page</span>

</div>

</header>

<br class="clear" />

</div>

<script>

var app = new kendo.mobile.Application(document.body, { skin: "nova" });

</script>

@{

ViewBag.Title = "Contact Page";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<div data-role="view" id="navbar-home" data-title="Contact Page" data-stretch="true">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="hamburger" data-align="left"></a>

<span data-role="view-title">Contact Page</span>

</div>

</header>

<br class="clear" />

</div>

@{

ViewBag.Title = "About Page";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<div data-role="view" id="navbar-home" data-title="About Page" data-stretch="true">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="hamburger" data-align="left"></a>

<span data-role="view-title">About Page</span>

</div>

</header>

<br class="clear" />

</div>

I hope the information will help.

Regards,
Alexander Valchev
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 24 Dec 2015, 09:50 AM

IMG-0011.zip

Hi Benjamin,

I tested the solution and it seems to work OK on my side. I am attaching a short video.

Regards,
Alexander Valchev
Telerik

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Drawer as Navigation Menu

3 Answers, 1 is accepted