I try to set up a sample for an universal app. Currently I'm stuck with navigation inside the splitview. The console logs an error saying that the links "#rightOne" and "#rightTwo" are not found. Here is my code (testet in kendo ui dojo). The code is adjusted to allways show the tablet code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<style>
html, body, #phoneApp {
height: 100%;
}
</style>
</head>
<body>
<div id="tabletApp" style="display:none;">
<div data-role="splitview">
<div data-role="pane" id="left" data-layout="leftLayout">
<div data-role="view">
<a href="#rightOne" data-target="right">One</a>
<a href="#rightTwo" data-target="right">Two</a>
</div>
<div data-role="layout" data-id="leftLayout">
<div data-role="header">
<div data-role="navbar">
TEST APP
</div>
</div>
</div>
</div>
<div data-role="pane" id="right" data-layout="rightLayout">
<div data-role="view" id="rightOne">
One
</div>
<div data-role="view" id="rightTwo">
Two
</div>
<div data-role="layout" data-id="rightLayout">
<div data-role="header">
<div data-role="navbar">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="phoneApp" style="display:none;">
<div data-role="view">
<h1>Phone Home</h1>
</div>
<div data-role="view" id="about">
<h1>Phone About</h1>
</div>
<div data-role="layout" data-id="phoneDefault">
<div data-role="header">
<div data-role="navbar">
Phone App
</div>
</div>
<!--Content-->
<div data-role="footer">
<div data-role="tabstrip">
<a href="" data-icon="home">Home</a>
<a href="#about" data-icon="info">About</a>
</div>
</div>
</div>
</div>
<script>
$(function() {
var app,
//Must be mobile and tablet
isTablet = kendo.support.mobileOS && kendo.support.mobileOS.tablet,
appElement = null,
appLayout = null;
console.log("mobileOS Info/isTablet", kendo.support.mobileOS, isTablet);
appElement = $("#tabletApp");
appLayout = (isTablet) ? null : "phoneDefault";
console.log(appElement);
app = new kendo.mobile.Application(appElement, {
transition: 'slide'
});
//Adjust visibility of proper app container
appElement.show();
});
</script>
</body>
</html>
If you turn your 2 links into Button widgets with
data-role="button"then is works.I'm not really sure why this changes the internal routing in Kendo, but it looks like when it is a plain
<a>then it tries to actually navigate instead of load a view element from the DOM.