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

Drawers not working for some instances

3 Answers 80 Views
Drawer (Mobile)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Asat asked on 04 Dec 2013, 11:58 AM
Hi there,

I am a newbee for KendoUI and trying few examples. In the sample application I am trying to develop I have a home page with links to other pages. Since it doesn;t need any Kendo support I created a links using a generic HTML list items and assign links to it. In the target pages I expect to have drawers. But they do not work as expected. 

Home page,

01.<div id="home-view" data-role="view" data-layout="home-layout" >
02.<div class="main-header"  >
03.<div class="logo"><img src="assets/img/rgb_medium.png"></div>
06.<div class="top-nav">
08.<li class="active"><a href="#">Home</a></li>
09.<li ><a href="crm_home.html"> Mobile CRM</a></li>
10.<li ><a href=""> Mobile Service</a></li>
11.<li ><a href="bar.html"> Sync Data</a></li>
12.<li ><a href="#clear"> Clear Data</a></li>
13.<li ><a href="#about"> About</a></li>
14.<div class="clear"> <div>
17.<div class="clear"> <div>

The bar.html which is in the same folder has following code in it.

01.<div id="bar" data-role="view">
02.    <p>I am remote view, my ID is "bar", but my relative path is "bar.html"</p>
03.    <p>Swipe to reveal the drawer</p>
06.    <!-- remote view is listed with its relative path "bar.html", not its ID "bar" -->
07.    <div data-role="drawer" >
08.        <ul data-role="listview">
09.            <li><a href="#foo">Foo</a></li>
10.            <li><a href="#barhtml">Bar</a></li>
11.        </ul>
12.    </div>

This will not show it as a drawer but show everything as a plain html list when I click the Sync Data link in home page. 

But if I add a button to the home page with data-role="button" and put the same link the drawer works like a charm.

In home page ,
1.<div id="foo" >
2.            <a href="bar.html" data-role="button">Load remote View</a>
3. </div>

So it seems I have to have the links in the source page according to a Kendo convention to get the drawer working in the target page. What should I do to achieve what I expect.

In more general terms, is it a bad practice to mix generic HTML and Kendo UI convensions?

Thanks in advance,

3 Answers, 1 is accepted

Sort by
Top achievements
Rank 1
answered on 04 Dec 2013, 12:05 PM
Well, if I add "data-role="button" to the list item in the home page link it works.  But I don;t think it as the correct way of doing it?

and where can I find the list of data-roles?
Kiril Nikolov
Telerik team
answered on 04 Dec 2013, 01:00 PM
Hello Asat,

When you want to navigate to another view from a regular link and not a Kendo UI Mobile component you need to handle the click and use the navigate() method of the application in order to correctly load the remote view with all the widgets working as expected. When you are navigating using a Kendo UI component the application handles the navigation itself and you do not need to manually take care of it. In other words in order to make the regular link work, you will need something like this:

<div data-role="view" id="id" data-layout="layout">
  <a href="bar.html" id="link">test link</a>
      <ul data-role="listview">
                 <a href="bar.html">Sync Data</a>
       var app = new;

Kiril Nikolov
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Top achievements
Rank 1
answered on 07 Dec 2013, 06:14 PM
Hi Kiril,

Thanks alot. That worked like a charm!

Drawer (Mobile)
Asked by
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Share this question