I have observed that drawer animation becomes "jumpy" if view performs a lot of data loading and binding on show. As a way around it, I am building postponing any heavy duty processing until the animation is completed.

I am using deferred promises to watch for the transition to complete using the following. Here's a question: is there a way to do it?

This error is reproducable on the drawer on
http://demos.telerik.com/kendo-ui/mobile/drawer/index.html

When you open the drawer partially a couple of times by dragging the inbox view manually (mouse down somehwhere in the inbox view, then drag some pixels to the right and mouse up before the drawer is fully opened), the drawer listview will disappear.

Is there a way to get the drawer to swipe up from the bottom rather than the sides?

I'm in a situation where I need to be able to access the model I have bound to the Drawer accessable to all the views it relates too. I've tried the below. Thanks in advance.


//in the view like this
app.filterService.viewModel.structureId

//model for filter

(function (global) {
  
    var FilterModel,
app = global.app = global.app || {};

    FilterModel = kendo.data.ObservableObject.extend({

        structures: kendo.observable({ items: GetStructures()}),
        structureId: 49118,

        days: kendo.observable({
            items: [
                { id: 7, name: "Past 7 Days" },
                { id: 30, name: "Past 30 Days" },   
                { id: 60, name: "Past 60 Days" },
                { id: 90, name: "Past 90 Days" }]
        }),
        day: 7
    });
   
    app.filterService = { viewModel: new FilterModel() };
    console.log(app.filterService.viewModel.structureId);
}
)(window);





If possible, I'd like a tabstrip layout with a drawer that slides out from the left when you select one of the tabs.  Kind of have it working with something like the code below.   Before I go much further, is this possible with KendoUI?  I'm starting to see some apps do this (like Lowes Hardware app).  It's really nice.

<div data-role="layout" data-id="drawer-layout">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
        </div>
    </header>

    <div data-role="footer">
        <div data-role="tabstrip" data-selected-index="1" data-select="onSelect">
            <a data-icon="contacts">foo</a>
            <a data-icon="contacts">bar</a>
            <a data-icon="info">baz</a>
            <a data-icon="info">baz2</a>
            <a data-icon="info">baz4</a>
        </div>
    </div>    
</div>

<script>
  
   function onSelect(e) {
    
       if (e.item.index()==0)
       {
           $("#my-drawer").data("kendoMobileDrawer").show();
           e.preventDefault(); //prevent the tab selection
       }
   }
</script>

Hello,

I am developing an application for android, and found a strange effect on one of the devices. Touching of the Drawer's menu leads to two actions:
First: Drawer receives the event and begins to hide.
Second: View gets Touch event.
It's not very convenient, because the user does not expect it to happen.
I made a video recording, where you can see it.
Test button increments the counter on the screen when it receives a click. You can see how the counter is incremented when I click on the menu, not the button.

I also attach the source codes of this simple application.
It's been on my Nexus 10 with android 4.3. I compile Phonegap 3.0 application with Android SDK (local on my computer).

No such effect on other devices.
In a web browser also works correctly on all devices.

Regards.

I building a Kendo Mobile App which is using the Drawer. I have a need to have a particular view hide and show the drawer navigation buttons / header / footer etc. similar to the Kindle reader app.  So that while the user are in the view it is full screen while interacting with this view until you touch near the top or bottom of the screen. Then I need the navigation button etc to reappear.  Any suggestions on how to accomplish this task? Any help would be greatly appreciated. 

So this code is identical to code I have on my other views.  The only thing I can't figure out, is why inlcuding data-views PREVENTS the window from opening up on in this view.  The data-views path is correct.  I can even copy paste code that works perfects with other views I have that also uses data-views, include the view I want to open on and it still won't work.  

Why would data-views prevent the drawer from opening on a page that has been added to data-views? And more so, why does it not work here, but work everywhere else I use it.

<div id="drawerAccounts"
     data-role="drawer"
     data-views='[
    "/View/Account/AccountDefaultView.htm"                     //This is the correct file path and this is the view where the drawer is located.
    ]'
     data-show="accountListDrawerController.showEvent"
     data-model="accountListDrawerController.dataModel">
    <ul data-role="listview" data-type="group" data-click="clk">
        <li>
            [Person Name]
            <ul>
                <li><a href="#" data-link="/view/editPerson/editPersonDefaultView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Back to Person</a></li>
            </ul>
        </li>
        <li>
            Other
            <ul>
                <li><a onclick="crmMobile.showThemeModal(); HideDrawer('drawerAccounts');">Change UI Theme</a></li>
                <li><a href="#" data-link="/view/Misc/MiscAboutVA.htm" data-transition="none">About Virtual Advisor</a></li>
                <li><a href="/view/Misc/MiscLoggingOut.htm" onclick="logOut();" data-transition="none">Logout</a></li>
            </ul>
        </li>
    </ul>
</div>


Here is a sample of my code from a view that works correctly.
Snippet<div id="drawerEditPerson"
     data-role="drawer"
     data-views='[
    "/view/editPerson/editPersonDefaultView.htm",
    "/view/editPerson/widget/editPersonStatusView.htm",
    "/view/editPerson/widget/editPersonDetailsView.htm",
    "/view/editPerson/widget/editPersonNameView.htm",
    "/view/editPerson/widget/editPersonDisciplinesView.htm",
    "/view/editPerson/widget/viewPersonDisciplinesView.htm",
    "/view/editPerson/widget/viewPersonElectronicContactView.htm",
    "/view/editPerson/widget/viewPersonContactNumbersView.htm",
    "/view/editPerson/widget/viewPersonAddressesView.htm",
    "/view/editPerson/widget/EditPersonRemarksView.htm",
    "/view/editPerson/widget/ViewPersonCompaniesView.htm",
    "/view/editPerson/widget/ViewPersonGroupsView.htm",
    "/view/editPerson/widget/viewPersonNotesView.htm",
    "/view/editPerson/widget/viewPersonRelationshipsView.htm",
    "/view/editPerson/widget/viewPersonCampaignsView.htm",
    "/view/editPerson/widget/viewPersonDocumentsView.htm",
    "/view/editPerson/widget/viewPersonActivitiesView.htm"
    ]'
     data-show="peopleEditDrawerController.showEvent"
     data-model="peopleEditDrawerController.dataModel">
    <ul data-role="listview" data-type="group" data-click="clk">
        <li>
            Contact Info
            <ul>
                <li><a href="#" data-link="/view/editPerson/editPersonDefaultView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Preview</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonNameView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Name</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonStatusView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Status</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonDetailsView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Details</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/editPersonDisciplinesView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Disciplines</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonElectronicContactView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Electronic Contact</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonContactNumbersView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Contact Numbers</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonAddressesView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Address</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/EditPersonRemarksView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Remarks</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/ViewPersonGroupsView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Groups</a></li>
                <li><a href="#" data-link="/view/editPerson/widget/viewPersonNotesView.htm?id=#id#&includeGeneral=true&includeActivity=false&includeDocument=false&includeGroup=false&includeAccount=false" data-bind="idLink: id" data-transition="none">Notes</a></li>
                <li><a href="#" data-link="/view/Account/AccountDefaultView.htm?id=#id#" data-bind="idLink: id" data-transition="none">Accounts</a></li>
            </ul>
        </li>
        <li>
            Other
            <ul>
                <li><a onclick="crmMobile.showThemeModal(); HideDrawer('drawerEditPerson');">Change UI Theme</a></li>
                <li><a href="#" data-link="/view/Misc/MiscAboutVA.htm?id=#id#" data-bind="idLink: id" data-transition="none">About Virtual Advisor</a></li>
                <li><a href="/view/Misc/MiscLoggingOut.htm" onclick="logOut();" data-transition="none">Logout</a></li>
            </ul>
        </li>
    </ul>
</div>

I am getting an 'object reference not set to an instance of an object' error on the mobile drawer when trying to add it to the _Layout.cshtml of my application.  Are you allowed to use the mobile drawer in the _Layout without setting up any mobile views or mobile layouts?  If so, could you provide an example or show me where I am going wrong.  Below are code snippets from my _Layout.cshtml file:

Below are my CSS and JS files in the head section of _Layout.cshtml:

Below is where I am creating my mobile drawer inside of the body tag in my _Layout.cshtml file:

And below is my JavaScript that I have at the bottom of my body tag in _Layout.cshtml:

Hi Fellas,

my problem is that I actually have been running into several times in the last few weeks. I use google maps and I want swipeToOpen to be set to false, but to all the other Views it should be on. To demonstrate my problem I created some code right here http://jsbin.com/OzOhelAK/11/edit
As you can see, if you swipe to the left or to the right the drawer opens up. But if I switch to the map View, I would like to disable that function.

I would appreciate any help!

Thank you so much for everything,
Chris