Drawers not working for some instances

4 posts, 0 answers
  1. Asat
    Asat avatar
    4 posts
    Member since:
    Nov 2013

    Posted 04 Dec 2013 Link to this post

    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
  2. Asat
    Asat avatar
    4 posts
    Member since:
    Nov 2013

    Posted 04 Dec 2013 Link to this post

    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?
  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 04 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Asat
    Asat avatar
    4 posts
    Member since:
    Nov 2013

    Posted 07 Dec 2013 Link to this post

    Hi Kiril,

    Thanks alot. That worked like a charm!

    regards,
    Ishan
Back to Top
Kendo UI is VS 2017 Ready