application.navigate does not update the tabstrip

3 posts, 0 answers
  1. Robin
    Robin avatar
    7 posts
    Member since:
    Aug 2013

    Posted 11 Oct 2013 Link to this post

    Hi,

    I've got an application that calls application.navigate.
    When you move from view1 to view2, the tabstrip updates, however going back the other way causes the tabstrip to go out of sync.
    Here's some sample code to illustrate the behaviour:

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <meta name="format-detection" content="telephone=no"/>
        <meta name="viewport"
              content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=medium-dpi"/>
     
        <link rel="stylesheet" href="styles/926/kendo.mobile.all.min.css"/>
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo/926/kendo.mobile.min.js"></script>
     
    </head>
     
    <body id="dmbody">
    <script type="text/javascript">
        var application = new kendo.mobile.Application($(document).body,
                        {
                            transition: "slide",
                            skin: "flat"
                        });
        function navToView2() {
            //performs all sorts of logic, but boils down to calling application.navigate to some URL
            application.navigate('#view2');
        }
        function navToView1() {
            //performs all sorts of logic, but boils down to calling application.navigate to some URL
            application.navigate('#view1');
        }
    </script>
     
    <!-- initial view -->
    <div data-role="view" data-layout="app" data-title="View 1" id="view1">
        <p>
            <a data-role="button" data-click="navToView2">View 2</a>
        </p>
    </div>
     
    <div data-role="view" data-layout="app" data-title="View 2" id="view2">
        <p>
            <a data-role="button" data-click="navToView1">View 1</a>
        </p>
    </div>
     
    <!-- application layout template -->
    <div data-role="layout" data-id="app">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>
        <div data-role="footer">
            <div data-role="tabstrip" >
                <a href="#view1">View 1</a>
                <a href="#view2">View 2</a>
            </div>
        </div>
    </div>
     
     
    </body>
    </html>

    Kendo UI Mobile build: 926
    Browser: Chrome 30

    Any idea why this happens?

    Thanks.
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 14 Oct 2013 Link to this post

    Hello Robin,

    thank you for contacting us. You have stumbled upon a certain flow in the tabstrip current view detection logic, which we are yet to address in our next release. Meanwhile, you can fix this case by changing the view1 reference to "/". Please check this functional example (which uses our Q2 SP1 build).

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Robin
    Robin avatar
    7 posts
    Member since:
    Aug 2013

    Posted 14 Oct 2013 Link to this post

    Hi Petyo, thanks, that's working.
Back to Top