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

Drawer Not Working

1 Answer 383 Views
Drawer (Mobile)
This is a migrated thread and some comments may be shown as answers.
TU
Top achievements
Rank 1
TU asked on 30 Aug 2013, 05:01 PM
Below is my code. I cannot get the Drawer to work. What am I doing wrong?

Thank you!!



<!DOCTYPE html>
<html>
<head>

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

<body>

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


 <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>Mailbox
            <ul>
                <li data-icon="inbox"><a href="#drawer-home" data-transition="none">Inbox</a></li>
            </ul>
        </li>
     
    </ul>
</div>



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


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

</div>

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

<style>
    .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"; }

    .inboxList
    {
        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;
    }
</style>

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

    </body>

</html>

1 Answer, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 03 Sep 2013, 03:42 PM
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.

Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Drawer (Mobile)
Asked by
TU
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Share this question
or