Drawer as Navigation Menu

4 posts, 0 answers
  1. Benjamin
    Benjamin avatar
    12 posts
    Member since:
    Apr 2011

    Posted 16 Dec 2015 Link to this post

    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:

    <div data-role="drawer" data-views='["bar.html"]'>

        <ul data-role="listview">

                 <li><a href="#foo">Foo</a></li>

                 <li><a href="bar.html">Bar</a></li>

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

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 18 Dec 2015 Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Benjamin
    Benjamin avatar
    12 posts
    Member since:
    Apr 2011

    Posted 22 Dec 2015 in reply to Alexander Valchev Link to this post

    Hi Alexander thank you for your solution but remove data-rel="external" attribute doesn't help. The link in ipad still open the page in new tab. Is there any other suggestion?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 24 Dec 2015 Link to this post

    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
    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready