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

application.navigate does not update the tabstrip

2 Answers 98 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Robin
Top achievements
Rank 1
Robin asked on 11 Oct 2013, 03:04 PM
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 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 14 Oct 2013, 08:01 AM
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!
0
Robin
Top achievements
Rank 1
answered on 14 Oct 2013, 09:23 AM
Hi Petyo, thanks, that's working.
Tags
General Discussions
Asked by
Robin
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Robin
Top achievements
Rank 1
Share this question
or