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

Change to another view with Layout

2 Answers 639 Views

Application

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

Juan Pablo Perez asked on 07 Mar 2013, 06:50 AM

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>

<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 Answers, 1 is accepted

Accepted

answered on 08 Mar 2013, 12:53 PM

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!