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

Multiple .html files and drawers issues

6 Answers 120 Views
Drawer (Mobile)
This is a migrated thread and some comments may be shown as answers.
Markus
Top achievements
Rank 2
Markus asked on 02 Dec 2013, 11:00 AM
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>



6 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 02 Dec 2013, 01:07 PM
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!
0
Markus
Top achievements
Rank 2
answered on 02 Dec 2013, 02:56 PM
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
0
Kiril Nikolov
Telerik team
answered on 02 Dec 2013, 03:17 PM
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!
0
Markus
Top achievements
Rank 2
answered on 02 Dec 2013, 03:49 PM
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

0
Kiril Nikolov
Telerik team
answered on 03 Dec 2013, 08:16 AM
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!
0
Markus
Top achievements
Rank 2
answered on 03 Dec 2013, 12:53 PM
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
Tags
Drawer (Mobile)
Asked by
Markus
Top achievements
Rank 2
Answers by
Kiril Nikolov
Telerik team
Markus
Top achievements
Rank 2
Share this question
or