Drawer Not Working

2 posts, 0 answers
  1. TU
    TU avatar
    2 posts
    Member since:
    Mar 2007

    Posted 30 Aug 2013 Link to this post

    Below is my code. I cannot get the Drawer to work. What am I doing wrong?

    Thank you!!

    <!DOCTYPE html>

    <meta charset="utf-8">
    <title>App #1</title>

    <link href="../styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
            <link href="../styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
    <link href="../styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css"/>
    <link href="../styles/custom.css" rel="stylesheet" type="text/css"/>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
            <script src="../js/kendo.web.min.js" type="text/javascript"></script>
    <script src="../js/kendo.mobile.min.js" type="text/javascript"></script>
            <script src="../examples/content/shared/js/console.js"></script>


    <!-- Main View -->
    <div id="mainView" data-role="view" data-title="View" >
              <h1>App #1</h1>
                <p>REST API.</p>

     <div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox"></div>
     <div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['drawer-home']">
        <ul data-role="listview" data-type="group">
                    <li data-icon="inbox"><a href="#drawer-home" data-transition="none">Inbox</a></li>

    <!-- Layout -->
    <div data-role="layout" data-id="mainLayout">
    <div data-role="header">
    <div data-role="navbar">
                         <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
    <span data-role="view-title"></span>

            <!-- Footer Nav Bar -->
                 <div data-role="footer">
                        <div data-role="tabstrip">
                             <a href="default.html" data-icon="favorites">Home</a>
                             <a href="views/view2.html" data-icon="favorites">View All Records</a>
                             <a href="views/view4.html" data-icon="favorites">Insert New Record</a>


        // reset global drawer instance, for demo purposes
        kendo.mobile.ui.Drawer.current = null;

        .km-ios #my-drawer .km-content, .km-android #my-drawer .km-content, .km-blackberry #my-drawer .km-content,
        .km-ios #my-drawer .km-list > li, .km-android #my-drawer .km-list > li, .km-blackberry #my-drawer .km-list > li,
        .km-ios #my-drawer .km-listview-link > .km-icon, .km-android #my-drawer .km-listview-link > .km-icon, .km-blackberry #my-drawer .km-listview-link > .km-icon,
        .km-ios #my-drawer .km-list li > .km-icon, .km-android #my-drawer .km-list li > .km-icon, .km-blackberry #my-drawer .km-list li > .km-icon
            background-color: #4e4e4e;
            color: #fff;

        .km-ios #my-drawer .km-group-title,
        .km-blackberry #my-drawer .km-group-title
            background-color: #6e6e6e;
            color: #fff;

        .km-drawer-button:before, .km-drawer-button:after  { content: "\E077"; }
        .km-inbox:before, .km-inbox:after { content: "\E0B0"; }
        .km-sent:before, .km-sent:after { content: "\E0C6"; }
        .km-trash:before, .km-trash:after { content: "\E0C3"; }
        .km-spam:before, .km-spam:after { content: "\E0C5"; }
        .km-star:before, .km-star:after { content: "\E0D7"; }
        .km-settings:before, .km-settings:after { content: "\E0DA"; }
        .km-off:before, .km-off:after { content: "\E0B9"; }

            font-size: .8em;

        .inboxList p,
        .inboxList h2,
        .inboxList h3
            margin: 5px 2px;

        .inboxList p,
        .inboxList h3
            color: #777;

        .inboxList h3.time
            color: #369;
            float: left;
            margin-right: 10px;

       window.app = new kendo.mobile.Application(document.body, { layout: "mainLayout" });
       //var app = new kendo.mobile.Application(document.body);


  2. Petyo
    Petyo avatar
    2436 posts

    Posted 03 Sep 2013 Link to this post

    Hello James,

    The sample you are using uses the views configuration option to restrict which views are being displayed. Removing that configuration fixes the issue in question. Please see this runnable example.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top