Drawers not working for some instances

[Asat]

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>
04.</div>
05.
06.<div class="top-nav">
07.<ul>
08.<li class="active"><a href="#">Home</a></li>
09.<li ><a href="crm_home.html"> Mobile CRM</a></li>
10.<li ><a href="www.google.com"> 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>
15.</ul>
16.</div>
17.<div class="clear"> <div>
18.</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>
04.</div>
05.
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,
Ish

[Asat]

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]

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">
            <li>
                 <a href="bar.html">Sync Data</a>
            </li>
       </ul>
</div>
<script>
       $('#link').on('click',function(e){
            e.preventDefault();
            app.navigate('bar.html');
          })
       var app = new kendo.mobile.Application();
</script>

Regards,
Kiril Nikolov
Telerik

[Asat]

Hi Kiril,

Thanks alot. That worked like a charm!

regards,
Ishan