Using Kendo Mobile, How to Make a View within the Drawer Full Screen?

Question

I building a Kendo Mobile App which is using the Kendo Mobile 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 interacts the view the view fills the full screen and continues until the user touches near the top or bottom of the screen. Then the app needs the navigation buttons etc to reappear. Any suggestions on how to accomplish this task? Any help would be greatly appreciated.

Answer 1

A layout is essentially a view and can be rendered programmatically. Something like this would work:

<div id="app"></div>

<script>
    var view = new kendo.View("<span>Foo</span>");

    var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

    layout.render($("#app"));

    layout.showIn("#content", view);
</script>

You should be able to load a different layout (one without header and footer) and display your content in it.