I am currently experimenting with KendoUI vs. jQuery Mobile and am running into something that just makes no sense. In trying to build an SPA for a mobile app, I have a seemingly basic structure setup of header, content area and footer based on combining together multiple samples.
When I click on "Block #1" it does in fact navigate to my secondary view, but my shared header disappears (footer stays put). For the life of me, I can't get the header to stay put - I've tried using standard href tags, anchor tags (i.e. #), the Kendo router option and even manual app.navigate() to no avail. I've even tried a combination of a true SPA (i.e. template is embedded with a style="display: none;" on it as well as using a Views folder with the HTML inside that and the header just won't stay put. Probably the strangest thing is, when I refresh the page (after clicking one of the items), the header shows up on refresh. So it's like something is clearing it, but I have no idea what.
Any guesses? Here is my sample code:
<!DOCTYPE html>
<html>
<head>
<title>Sample App</title>
<!-- Kendo UI -->
<link href="_assets/kendo/css/kendo.common.min.css" rel="stylesheet" />
<link href="_assets/kendo/css/kendo.rtl.min.css" rel="stylesheet" />
<link href="_assets/kendo/css/kendo.default.min.css" rel="stylesheet" />
<link href="_assets/kendo/css/kendo.dataviz.min.css" rel="stylesheet" />
<link href="_assets/kendo/css/kendo.dataviz.default.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="_assets/kendo/css/kendo.mobile.all.min.css">
<!-- Custom -->
<!--<link rel="stylesheet" media="screen" type="text/css" href="_assets/css/styles.css" />-->
<script src="_assets/kendo/js/jquery.min.js"></script>
<!--<script src="_assets/kendo/js/kendo.all.min.js"></script>-->
<script src="_assets/kendo/js/kendo.mobile.min.js"></script>
<style>
.km-navbar,
.bottom_tools
{
background-color: #445B78 !important;
}
.km-button
{
border: none !important;
}
</style>
</head>
<body>
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">
<div class="section homescreen">
<div class="texture">
<div class="col_content">
<div class="col_16">
** Should Be a Sticky Header **
</div>
</div>
</div>
</div>
</div>
</header>
<!--View content will render here, but doesn't -->
<footer data-role="footer">
<div data-role="tabstrip">
<div class="bottom_tools">
<div class="bottom-tool-buttons">app button</div>
</div>
</div>
</footer>
</section>
<div id="home" data-role="view" data-layout="default">
<div class="col_content">
<div class="col_16 textaligncenter">
<div class="box boxA">
<div class="content">
<!-- Standard HREF linking to a view, but view is a mimic of the sample-template option below -->
<a data-role="button" href="views/reminder/index.html">
Box #1
</a>
</div>
</div>
<div class="box boxB">
<div class="content">
<!-- Link with the '#' -->
<a data-role="button" href="#sample-template">
Box #2
</a>
</div>
</div>
<div class="box boxC">
<div class="content">
<!-- Link without the '#' -->
<a data-role="button" href="sample-template">
Box #3
</a>
</div>
</div>
<div class="box boxD">
<div class="content">
<a href="views/location/index.html" data-role="button">
Box #4
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Sample Template - this is the exact same thing in views/reminder/index.html -->
<div id="sample-template" data-role="view" data-title="Test Title" data-transition="overlay:up" data-persist="true" style="display:none;" data-layout="default">
<strong style="font-size: 500px;">heyo</strong>
</div>
<script>
var app = new kendo.mobile.Application(document.body,
{
transition: 'slide'
});
</script>
</body>
</html>
This was a known issue in the Q1 release. Upgrade to the latest.