Layout & Navigation Issue with multiple views

12 posts, 1 answers
  1. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 09 Apr Link to this post

    I am trying to achieve the following :

    1. Hide the header & footer on home page or home view but display on other views
    2. Customize the header for each view
    3. Navigating to views using href tags was not showing the layout


    ---------------------------------------First Issue : Hide the header & footer on any specific view -------------------------------------------------------------------                             
    I am using the following code for lay-out initialization in home view i.e. index.html:

    <body>
        <div data-role="view" data-title="Home View" id="index-en">
    <div data-role="layout" data-id="main-layout">
        <div data-role="header">             
            <div data-role="navbar">               
                <span  data-role="view-title"></span>      
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="#index-en" data-icon="home">Home</a>  
                <a href="views/view1.html" data-icon="organize">Agenda</a>
                <a href="views/view2.html" data-icon="favorites">Registration</a
                <a href="views/view3.html" data-icon="globe">Gallery</a
                <a href="views/view4.html" data-icon="contacts">Speakers</a>             
            </div>
        </div>
    </div>
     
     <script>
        var app = new kendo.mobile.Application(document.body,
            {
                platform:'ios7',
                layout: "main-layout"
                   
            });
    </scirpt>
     
    </div>
    </body>

    How can I hide the header and footer on the home page.
    Currently I used the following custom css to hide the header

    #index-en div.km-header {
        display : none;
    }

    I probably need to do the same to hide the footer also.
    Is there any other standard approach to do this ?

    ------------------------------------------Second Issue : Customize the header for any specific view--------------------------------------------
    Since I have the main-layout defined , the same layout will be copied to all views.
    Let's say I want to change the header for a specific view to be 
    <div data-role="header">              
            <div data-role="navbar">                
                <img  src="xyz/abc.jpg"></img>       
            </div> 
    </div>

    I was able to achieve this by adding data-layout tag to this view and defining a new layout in this view's html file.

    <div data-role="view" data-title="Second View" data-layout="custom-layout" id="view2">
    </div>
    <div data-role="layout" data-id="custom-layout">
        <div data-role="header">             
            <div data-role="navbar">               
                <img  src="xyz/abc.jpg"></img>     
            </div>
        </div>
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="#index-en" data-icon="home">Home</a>  
                <a href="views/view1.html" data-icon="organize">Agenda</a>
                <a href="views/view2.html" data-icon="favorites">Registration</a
                <a href="views/view3.html" data-icon="globe">Gallery</a
                <a href="views/view4.html" data-icon="contacts">Speakers</a>             
            </div>
        </div>
    </div>

    But this was breaking the tabstrip navigation.
    Could you please advise how can this be achieved ?

    --------------------------Third Issue : Navigating to views directly using href tags was not showing the layout----------------------------

    In my home page, I have a gird of four images created using CSS flex-box.
    I have added href on each image to link to a different view.
    But when clicked on the image only the view's content is displayed , the layout is not shown.
    The custom css styling applied to view's elements is also broken.

    <div id="flex-grid-container1" class="flex-container-center-content">
                <div class="flex-item1">              
                    <a href="views/view2.html"><img src="images/homeGrid/agenda.jpg"/></a>           
                </div>
                <div class="flex-item2">
                    <a href="views/view2.html"><img src="images/homeGrid/speakers.jpg"/></a>
                </div>
                 
     </div>

    I have also tried using #idOfView in the href tags but same problem exists.

    Could you please let me know how this can be resolved ?

    Sorry for the very lengthy post , but these are the issues I am struck with now.
    Thanks in advance.

  2. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 10 Apr in reply to devApps Link to this post

    Can I get any help in these issues ?
  3. Tsvetina
    Admin
    Tsvetina avatar
    2085 posts

    Posted 11 Apr Link to this post

    Hello,

    Straight to your questions:

    1. If you don't want to display a header and a footer in the Home view, don't define such within the view and don't apply data-layout setting to the View. Also, remove the layout setting from the Application. By default, all shared app layouts are defined in the root page and are referenced by views using a data-layout setting. This is explained in the following article:
    Kendo UI Hybrid Layout

    2. I cannot reproduce the issue in the following Dojo that uses three views, of which the third one uses a custom layout with no header and its own footer:
    http://dojo.telerik.com/@tsveti/OdOQA/2

    3.Do these views declare a data-layout setting? Also, please confirm that you do not create more than one instance of the kendo.mobile.Application.

    Regards,
    Tsvetina
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 12 Apr in reply to Tsvetina Link to this post

    Thanks a lot Tsvetina.

    Removing the layout setting from the application and using it on each view using data-layout attribute solved the first two issues.

    1. I was able to remove the header and footer on home view.
    2. I also have a view with custom layout i.e. I was able to remove the header and the tab-strip in the footer was working as expected.                                                                                                                                                                                        But still for you to reproduce the second issue in your dojo snippet, could you please try copying the "secondview" and "strechview" in separate hmtl files and test the same.

    Only the third issue still remains.

    I don't have multiple instances of the kendo.mobile.Application.

    All these views earlier did not have data-layout setting as the layout was set in application instantiation.

    But now as per your suggestion , I have removed the layout setting from application.

    The main-layout is defined only in the home page which has the flexbox grid of images.

    The images, each have a href to a different view. All these views share the main-layout using data-layout attribute.

    Even after making this change , the layout is still not being displayed when navigated to the views from the images grid.

  5. Tsvetina
    Admin
    Tsvetina avatar
    2085 posts

    Posted 13 Apr Link to this post

    Hello,

    Could you show me the current state of these views. I would be interested in seeing:
    • the index page with all the layout definitions
    • the full contents of one of the views that do not load their layout
    • any script that may be related to loading the problematic view
    It would be best if you could send us a runnable sample, so we can debug the problem locally.

    Regards,
    Tsvetina
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 14 Apr in reply to Tsvetina Link to this post

    Here are the contents of the index.html file

    <!DOCTYPE html>
    <html>
     
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet">
     
        <link href="styles/overrides.css" rel="stylesheet">
        <link href="styles/main.css" rel="stylesheet">
        <link href="css/main.css" rel="stylesheet">
     
        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.mobile.min.js"></script>
     
    </head>
     
    <body>
        <div data-role="view" data-title="Primary Care Conference" id="index-en">
             
            <img class="banner-img" src="images/homeGrid/night-water-reflected-new2.jpg"/>
     
            <!-- Using CSS flexbox -->
            <div id="flex-grid-container1" class="flex-container-center-content">
                <div class="flex-item1">     
                    <a href="views/agendaView.html"><img src="images/homeGrid/agenda.jpg"/></a
                </div>
                <div class="flex-item2">
                    <a href="views/speakersView.html"><img src="images/homeGrid/speakers.jpg"/></a>
                </div>
            </div>
     
            <div id="flex-grid-container2" class="flex-container-center-content">
                <div class="flex-item3">
                    <img src="images/homeGrid/venue.jpg"/>
                </div>
                <div class="flex-item4">
                    <a href="views/regView.html"><img src="images/homeGrid/maps.png"/></a>
                </div>
            </div>                  
     
        </div>
     
        <div data-role="layout" data-id="main-layout">
            <div data-role="header">
               <div data-role="navbar">  
                    <a href="#app-drawer" data-rel="drawer" data-role="button" data-align="left" data-icon="drawer-icon"></a>            
                    <span class="myNavbarHeaderTitleText" data-role="view-title"></span>
                </div>
            </div>
            <div data-role="footer">
                <div data-role="tabstrip">
                    <a href="#index-en" data-icon="home">Home</a>  
                    <a href="views/agendaView.html" data-icon="organize">Agenda</a>
                    <a href="views/regView.html" data-icon="favorites">Registration</a
                    <a href="views/galleryView.html" data-icon="globe">Gallery</a
                    <a href="views/speakersView.html" data-icon="contacts">Speakers</a>             
                </div>
            </div>
        </div>
     
        <div data-role="drawer" id="app-drawer">
            <div data-role="header">
                <div data-role="navbar"> <span class="myDrawerNavbarHeaderTitleText">Menu</span> </div>
            </div>
             
            <ul data-role="listview">
                <li><a href="#index-en" data-icon="home"><span class="drawerlistItemText">Home</span></a></li>
                <li><a href="views/agendaView.html" data-icon="organize"><span class="drawerlistItemText">Agenda</span></a></li>
                <li><a href="views/regView.html" data-icon="favorites"><span class="drawerlistItemText">Registrations</span></a></li>
                <li><a href="views/galleryView.html" data-icon="globe"><span class="drawerlistItemText">Gallery</span></a></li>
                <li><a href="views/speakersView.html" data-icon="contacts"><span class="drawerlistItemText">Speakers</span></a></li>
                <li><a href="views/biographies.html" data-icon="action"><span class="drawerlistItemText">Follow us</span></a></li>
            </ul>
        </div>
     
     
        <script>
            var app = new kendo.mobile.Application(document.body,
            {
                platform:'ios7'
                //layout: "main-layout"
                //skin : "metro"   
            });      
             
        </script>
     
    </body>
     
    </html>

    Below here is the speakersView.html which is a remote view that tries to use the shared-layout defined in index.html

    <!DOCTYPE html>
     
    <html>
        <head>
            <title></title>
        </head>
        <body>
            View 4
            <div data-role="view" data-title="Key Speakers" data-layout="main-layout" id="speakersView">
                <div data-role="scrollview" data-enable-pager="false">
                    <div data-role="page">
                        <ul data-role="listview" data-style="inset">
                            <li>               
                                <div class="listViewRoundedIconShadowedImage"><img src="images/user-icons/black.png" /></div>
                                <div class="listViewTitleText">Dr.Asddfxcb Bdfffasas Aevfvdfe</div>   
                            </li>
                            <li>               
                                <div class="listViewRoundedIconShadowedImage"><img src="images/user-icons/doctor-green-round.png" /></div>
                                <div class="listViewTitleText">Prof Eaasddasd Rcsdcvvsv</div>                
                            </li>
                        </ul>
                    </div><div data-role="page">
                        <ul data-role="listview">
                            <li>               
                                <div class="listViewIconImage"><img src="images/user-icons/blue-user.png" /></div>
                                <div class="listViewTitleText">Dr.Asddfxcb Bdfffasas Aevfvdfe</div>      
                            </li>
                            <li>               
                                <div class="listViewIconImage"><img src="images/user-icons/black-lady.jpg" /></div>
                                <div class="listViewTitleText">Prof Eaasddasd Rcsdcvvsv</div>              
                            </li>
                        </ul>
                    </div>
                </div> <!-- End of scroller div -->           
            </div> <!-- End of view div -->       
        </body>
    </html>

     

    This is regView.html which is a remote view that defines it's own custom layout

    <!DOCTYPE html>
     
    <html>
        <head>
            <title></title>
        </head>
        <body>
            <div data-role="view" data-layout="custom-layout" data-title="Registrations">
                    Page Under Construction
            </div>
             
             <div data-role="layout" data-id="custom-layout">
                <div data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#index-en" data-icon="home">Home</a>  
                        <a href="views/agendaView.html" data-icon="organize">Agenda</a>
                        <a href="views/regView.html" data-icon="favorites">Registration</a
                        <a href="views/galleryView.html" data-icon="globe">Gallery</a
                        <a href="views/speakersView.html" data-icon="contacts">Speakers</a>           
                    </div>
                </div>
            </div>
     
        </body>
    </html>

     

    None of these views show the layout as well as the custom css when referenced from the gird

    From the drawer , they are fine, they show the layout as well as the custom css is applied.

    Could you also let me know how can I share a runnable sample ?

  7. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 17 Apr Link to this post

    Here is the link to download the runnable sample.

    ViewsNavigationSample

    I have included the problems and the steps to reproduce with in the views itself.

    Please let me know how can these issues be solved.

     

  8. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 17 Apr in reply to devApps Link to this post

    Any update on this post ?
  9. Tsvetina
    Admin
    Tsvetina avatar
    2085 posts

    Posted 18 Apr Link to this post

    Hi,

    I am copying my reply from the support thread that you opened, if someone else encounters the sample problem.

    The issue is caused by the fact that the links that you use are not Kendo UI widgets. Like described here, the mobile Application modifies the behavior of the Kendo UI hybrid widgets—ListView link items, buttons, tabs—so that they navigate between the mobile views when the user taps them. In your sample, the links are regular link elements, without any data-role set and they act as usual links and do not trigger inner app navigation. The easiest solution is to declare the links as buttons:
    <br><br>
    <data-role="button" class="km-link-button" href="views/view1.html">FirstView - Direct Link</a>
    <br><br>
    <data-role="button" class="km-link-button" href="views/view2.html">SecondView - - Direct Link</a>
    <br><br>

    The km-link-button class, is used to remove the Button border, so that it looks more like a link. Here is a style that you can add to your app to achieve this:
    <style>
        .km-view .km-link-button {
            border-colortransparent;
        }
    </style>


    Regards,
    Tsvetina
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 18 Apr Link to this post

    Thanks a lot for the reply.

    I have images which link to the views.

    I will try using the images with in the anchor tags. 

    I have mentioned other two issues also in the sample regarding the custom css and tab-strip issue when using  custom layout.

    Could you please let me know what is wrong there???

  11. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2085 posts

    Posted 20 Apr Link to this post

    Hello,

    About the custom styles—the custom background color is visible initially because you load only the given page within the Cordova app. However, when navigating in the Kendo UI app, Kendo UI has additional elements loaded on top of the View container that have a custom background of their own. 
    I will try to better explain the situation. When you navigate to a remote view in a Kendo Mobile Application, what happens is that the remote view content is copied into index.html and all scripts and styles referenced in index.html work on the new content. This includes the Kendo UI styles.
    However, when you navigate using a regular link, the Cordova WebView (or the browser) goes to a completely different page and is no longer at index.html, so all script and style references from index.html are lost and only your inline styles apply.

    To overwrite the Kendo UI style for the view content background, you can use a CSS rule like this:
    <style>
        #view1 .km-content {
            background: lightblue;
        }
    </style>


    With regard to the TabStrip issue, it does happen because of the link to the Home page, as the TabStrip is unable to confirm that the currently selected view location is the one from its tab link. In general, it is advised to make all views local OR remote and not mix local with remote views.
    The problem will be resolved if you move the Home view into a separate HTML file and load it using the initial setting of the Application object:
    var app = new kendo.mobile.Application(document.body,
    {
        platform: 'ios7',
        initial: 'views/home.html'
    });

    You can find, attached to this message, your project with the above modifications applied.

    Regards,
    Tsvetina
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  12. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 23 Apr in reply to Tsvetina Link to this post

    Thanks a lot for the detailed explanation.

    Much appreciated.

Back to Top