Change to another view with Layout

3 posts, 1 answers
  1. Juan Pablo Perez
    Juan Pablo Perez avatar
    27 posts
    Member since:
    Apr 2010

    Posted 07 Mar 2013 Link to this post

    I've trying to change to another view using navigate() function. The view is changed but the header and footer of the layout are not shown.

    As I have a Tabstrip in the footer I try to change the tab at the same time.

    I've create an example where youu can see this behavior.

    <!DOCTYPE html>
    <html>
    <head>
        <title>My App</title>
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <script>
            function ChangeToView(e) {
                var data = e.button.data();
                var view =  data.id;
                var app = new kendo.mobile.Application();
                app.navigate('#view'+view);
                var tabStrip = $("#tabStrip").data("kendoMobileTabStrip");
                if (tabStrip)
                    tabStrip.switchTo("#view"+view);
            }
        </script>
    </head>
    <body>
       <div  id="home" data-role="view" data-layout="default">
        Hello Mobile World!
        <a class="button" data-role="button" data-click="ChangeToView" data-id="2">Change to view 2</a>
        <a class="button" data-role="button" data-click="ChangeToView" data-id="3">Change to view 3</a>
        </div>
        <div id="view2" data-role="view" data-layout="default" >View 2</div>
        <div id="view3" data-role="view" data-layout="default" >View 3</div>   
        <section data-role="layout" data-id="default">
            <header data-role="header">
                <div data-role="navbar">My App</div>
            </header>
            <!--View content will render here-->
            <footer data-role="footer">
                <div data-role="tabstrip" id="tabStrip">
                    <a href="#home">Home</a>
                    <a href="#view2">View 2</a>
                    <a href="#view3">View 3</a>
                </div>
            </footer>
        </section>
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.mobile.min.js"></script>
        <script>
            var app = new kendo.mobile.Application(document.body,
                {
                    transition:'slide'
                });
        </script>
    </body>
    </html>
    Does anybody know a way to make it work? Thanks in advance.
  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 08 Mar 2013 Link to this post

    Hi Juan,

    The problem occurs because mobile application is reinitialized in the ChangeToView function. Multiple initialization is not supported.

    Please try the following:
    function ChangeToView(e) {
        var data = e.button.data();
        var view =  data.id;
        //var app = new kendo.mobile.Application();
        app.navigate('#view'+view);
        var tabStrip = $("#tabStrip").data("kendoMobileTabStrip");
        if (tabStrip)
            tabStrip.switchTo("#view"+view);
    }


    Kind regards,
    Alexander Valchev
    the Telerik team
    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. Juan Pablo Perez
    Juan Pablo Perez avatar
    27 posts
    Member since:
    Apr 2010

    Posted 08 Mar 2013 Link to this post

    Hi Alexander,

    With that change it works great!

    Thanks a lot.

    Juan
Back to Top