Kendo Mobile integrating Hierarchical data view inside Drawer functionality

Hi I am trying to learn to create a mobile app using using Phonegap, KendoUI and HTML5.

So, I am trying to integrate KendoUI Hierarchical Data inside a Kendo UI Drawer.

Example of Kendo UI Drawer

Example of Kendo hierarchical data

So, I am trying to combine both the examples, so that the hierarchical data will have a drawer side menu.

The index view is having the drawer code and a sub view is having the hierarchical data.

They both work good when viewed as separate pages but in the subview if i change the code to include the drawer data then it is not working.

<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox">
    <div data-role="view"  data-show="rebindListView" id="hierarchical-view" data-transition="slide">
         <header data-role="header">
             <div data-role="navbar" id="employee-navbar">
                 <a data-role="backbutton" id="employee-back" data-align="left">Back</a>
                 <span data-role="view-title"></span>
                 <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
             </div>
         </header>
         <ul id="hierarchical-listview" data-role="listview" data-template="hierarchicalMobileListViewTemplate"></ul>
     </div> 
</div>

For the above code I can see only the drawer menu and if I comment out the first div then I can see the hierarchical data but I am not able to see them both work together.

Can someone please help me as I am stuck at this and dont know how to proceed further.

Kendo Forum Question regarding views

Also in kendo forum found that we cant use two data-roles as view in a same page. Can someone please guide me.

Thanks very much!!!


Source: html5

Leave a Reply