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

Mobile CSS not detected on some html.pages

6 Answers 39 Views

AppBuilder Windows client

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

This question is locked. New answers and comments are not allowed.

6 Answers, 1 is accepted

answered on 25 Jun 2013, 03:44 PM

Hi Emma,

You don't need to set window.location in order to navigate between pages/views. The Kendo UI way to achieve this is to use remote views. Please refer to Kendo UI documentation for more information.

I prepared a short sample which illustrates how to navigate between views without using window.location.

index.html

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<script src="cordova.js"></script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script src="scripts/hello-world.js"></script>

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="styles/main.css" rel="stylesheet" />

</head>

<body>

<div data-role="view" id="tabstrip-home" data-title="Hello World!">

<a href="myPage.html" data-role="button">Go</a>

</div>

<script>

var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });

</script>

</body>

</html>

myPage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

</head>

<body>

<div data-role="view">

This is my view

</div>

</body>

</html>

By clicking the Go button on first view, you will be navigated to the second view.

Hope this helps.
Regards,
Ivan K. Ivanov
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Missed our first webinar, watch it here.
Share feedback and vote for features on our Feedback Portal.

Accepted

answered on 26 Jun 2013, 03:28 PM

Hello Emma,

I updated index.html I sent you yesterday so you can see how to navigate between views programmatically.

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<script src="cordova.js"></script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script src="scripts/hello-world.js"></script>

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="styles/main.css" rel="stylesheet" />

</head>

<body>

<div data-role="view" id="tabstrip-home" data-title="Hello World!">

<a id="btnGo" data-role="button">Go</a> 

</div>

<script>

var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });

var isValid = true;

$("#btnGo").click(function(e) {

if (isValid) { //Here you can perform the validation logic you want

app.navigate("myPage.html");

}

});

</script>

</body>

</html>

Regards,
Ivan K. Ivanov
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Missed our first webinar, watch it here.
Share feedback and vote for features on our Feedback Portal.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Mobile CSS not detected on some html.pages

6 Answers, 1 is accepted