Multiple .html files and drawers issues

[Markus]

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>

[Kiril Nikolov]

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

[Markus]

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

[Kiril Nikolov]

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

[Markus]

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

[Kiril Nikolov]

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

[Markus]

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