Multiple .html files and drawers issues

7 posts, 0 answers
  1. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 02 Dec 2013 Link to this post

    I have an index.html with the follwing

    <!--Home-->
           <div data-role="view" id="view-home" data-layout="drawer-layout-home" data-title="ZUOL.CH APP">
               <div>
                   <div data-role="content" class="view-content" >
                       <div id="home-vers-markus" class="boxshadow">
                           <h4 >
                               Klicken Sie oben links auf das Icon um die Navigation zu öffnen
                           </h4>
                           <h5>Firmen, Vereine, Gemeinden, Links und vielese mehr.</h5>
                       </div>
                   </div>
               </div>
           </div>
    <!-- Drawer Home-->
           <div data-role="drawer" id="my-drawer-home" style="width: 270px" data-views="['/', 'view-home', 'view-home','view-witz', 'view-bild', 'view-wort']">
               <h1>ZUOL.CH App</h1>
               <ul data-role="listview" data-type="group" class="nobackground">
                   <li>
                       <ul>
                           <li data-icon="home" id="dl-firmen" class="dl-firmen">
                               <a href="firmen.html#firmen-home" data-transition="none">Firmen</a>
                           </li>
                           <li data-icon="contacts" id="dl-vereine" class="dl-verein">
                               <a href="#view-vereine" data-transition="none">Vereine</a>
                           </li>
                           <li data-icon="bookmarks" id="dl-gemeinden" class="dl-gemeinden">
                               <a href="#view-gemeinden" data-transition="none">Gemeinden</a>
                           </li>
                           <li data-icon="settings" id="dl-links" class="dl-links">
                               <a href="#view-links" data-transition="none">Links</a>
                           </li>
                           <li data-icon="settings" id="dl-links" class="dl-bild">
                               <a href="#view-bild" data-transition="none">Bild des Tages</a>
                           </li>
                           <li data-icon="settings" id="dl-links" class="dl-witz">
                               <a href="#view-witz" data-transition="none">Witz des Tages</a>
                           </li>
                           <li data-icon="settings" id="dl-links" class="dl-links">
                               <a href="#view-wort" data-transition="none">Wort zum Tag</a>
                           </li>
                       </ul>
                   </li>
                   <li>
                       <ul>
                           <li data-icon="about">
                               <a href="#drawer-about" data-transition="none">Über ZUOL.CH</a>
                           </li>
                           <li data-icon="globe">
                               <a href="#drawer-web" data-transition="none" >www.zuol.ch</a>
                           </li>
                       </ul>
                   </li>
                   <li>
                       <ul>
                           <li data-icon="action" id="dl-log-out">
                               <a id="bt_exit" onclick="exitFromApp()" data-icon="history">
                                   Exit
                               </a>
                           </li>
                       </ul>
                   </li>
               </ul>
           </div>
            
            
     
            <!-- Layout Home-->
           <div data-role="layout" data-id="drawer-layout-home">
               <header data-role="header">
                   <div data-role="navbar">
                       <a data-role="button" data-rel="drawer" href="#my-drawer-home" data-icon="drawer-button" data-align="left"></a>
                       <span data-role="view-title">ZUOL.CH</span>
     
                   </div>
               </header>
           </div>

    now I have an firmen.html with the following

    <!-- Firmen -->
           <div data-role="view" id="view-firmen-home" data-layout="drawer-layout-home" data-title="Firmen" >
               <div>
                   <div data-role="content" class="view-content" >
               
                           <h2>Suchen nach</h2>
                           <ul data-role="listview" data-style="inset" data-type="group">
                               <li>
     
                                   <ul>
                                       <li >
                                           <a href="#view-firmen-branchen">Branche</a>
                                       </li>
     
                                   </ul>
                               </li>
                           </ul>
                           <ul data-role="listview" data-style="inset" data-type="group">
                               <li>
     
                                   <ul>
     
                                       <li>
                                           <a href="#view-firmen-ort">Ort</a>
                                       </li>
     
                                   </ul>
                               </li>
                           </ul>
                           <ul data-role="listview" data-style="inset" data-type="group">
                               <li>
     
                                   <ul>
     
                                       <li>
                                           <a href="#view-firmen-a-z">Alphabet</a>
                                       </li>
                                   </ul>
                               </li>
                           </ul>
                       </div>
     
                   </div>
               </div>
       
     
           <!-- Branchen -->
           <div data-role="view" id="view-firmen-branchen" data-init="getBranchen" data-layout="drawer-layout-firmen" data-title="Firmen nach Branche"    >
                
                   <div data-role="content" class="view-content" >
                       <ul id="filterable-branchen" class="listen"></ul>
                   </div>
               
               <script type="text/x-kendo-tmpl" id="firmen-branchen-template">
                   <div class="km-listview-link">
                       <a href="javascript:getFirmen('branche','#:User_branche#')">
                           <span>#:User_branche#</span>
                       </a>
                   </div>
               </script>
           </div>
    I want to have two use two different drawers

    index.html#view-home -> data-layout-home -> #my-drawer-home
    firmen.html#view-firmen-home  > data-layout-home -> #my-drawer-home
    firmen.hmlt#view-firmen-branche -> data-layout-firmen -> #my-drawaer-firmen

    I have not been able to get this to work.

    Tried: put the code below in index.html not working
    Tried: put the code in firmen.html not working either

    The buttons do either nothing (console shows no error) or I get an error Uncaught TypeError: Cannot call method 'enable' of undefined

    How should it be done.

    If you split the mobile up in different .html files and want a drawer to be access from these different files how should it be done?

    Kind Regards 

    Markus





    <!-- Drawer Firmen-->
            <div data-role="drawer" id="my-drawer-firmen" style="width: 270px" data-views="['/', 'view-firmen-branche','view-firmen-ort']">
                <h1>ZUOL.CH App</h1>
                <ul data-role="listview" data-type="group" class="nobackground">
                    <li>
                        <ul>
                            <li data-icon="home" id="dl-home" class="dl-home">
                                <a href="#drawer-home" data-transition="none">Zurück</a>
                            </li>
                            <li data-icon="home" id="dl-firmen" class="dl-firmen">
                                <a href="firmen.html#view-firmen-branche" data-transition="none">Branch</a>
                            </li>
                            <li data-icon="contacts" id="dl-vereine" class="dl-verein">
                                <a href="firmen.html#view-firmen-ort" data-transition="none">Ort</a>
                            </li>
                            <li data-icon="bookmarks" id="dl-gemeinden" class="dl-gemeinden">
                                <a href="firmen.html#view-firmen-a-z" data-transition="none">A - Z</a>
                            </li>
     
                        </ul>
                    </li>
     
                </ul>
     
            </div>
             
           <!-- Layout Firmen-->
            <div data-role="layout" data-id="drawer-layout-firmen">
                <header data-role="header">
                    <div data-role="navbar">
                     <a data-role="button" data-rel="drawer" href="#my-drawer-firmen" data-icon="drawer-button"  data-align="left"></a><a data-role="button" data-rel="drawer" href="#my-drawer-firmen" data-icon="drawer-button"  data-align="left"></a>
                        <span data-role="view-title">ZUOL.CH - Firmen</span>
                    </div>
                </header>
            </div>



  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 02 Dec 2013 Link to this post

    Hi Markus,

    The functionality that you are looking for is currently not supported in Kendo UI. The Drawer widget works with local views and only and using remote views (separate html files) is not supported at the moment. If you think that such feature should be added, please go to our feedback section and post it as a suggestion.

    Thank you in advance for your cooperation.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 02 Dec 2013 Link to this post

    Dear Kiril

    I should have asked before wasting hours trying to find out what I am doing wrong.

    Can you explain this to me then?

    Associating the Drawer with remote Viewsviews array allows the developer to associate the Drawer with a list of view IDs on which the drawer will appear. In case when the Drawer has to be linked with a remote View, the developer should include in the views array its relative path, not the ID of the element.

    http://docs.kendoui.com/getting-started/mobile/drawer

    Markus
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 02 Dec 2013 Link to this post

    Hi Markus,

    Please accept my apologies for the incorrect response provided. I have created an example, showing the functionality that you are looking for. Please check it out and tell me if there is something else that I can help you with.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 02 Dec 2013 Link to this post

    Dear Kiril

    The problem I am havin is that I want different drawers.

    can you try to extend your project so view1.html would have two views

    id="bar" and id="bar2"

    Where bar would use the drawer-layout and bar2 would use a newle created drawer-layout2

    Markus

    Kind of should work like this

    - home
    - - view1.html#bar
    - - - - view1.html#bar2


    index.html is kind of home
    Link to view1.html#bar

    view1.html#bar is home to the bars with links to bar2 and bar3


    once you are on bar2 or bar3 you should have a different drawer for these two views.

    See attsched two html files to see what I am trying to do.

    Markus

  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 03 Dec 2013 Link to this post

    Hi Markus,

    In order to achieve this you will need to create separate layouts and drawers for the views which you want to use. After that in the drawer configuration, you need to set the views for which the drawer should be displayed. I have attached an example, showing a possible implementation. 

    Please let me know if it helps.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 03 Dec 2013 Link to this post

    Dear Kirl

    I did give up trying to split everyting since I had multiple views in ever extra .html file.

    Even now once I moved everything into one index.html file I have problems with the drawer as soon as I use

    app.navigate in Icenium project. So this most likely is not related to Kendo UI but Icenium Phone gap.

    Thanks for your help

    Markus
Back to Top
Kendo UI is VS 2017 Ready