Kendo-mobile - show/hide tabstrip
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.mobile.all.min.css">
<div data-role="view" data-title="Home" id="vHome" data-transition="slide">
<ul data-role="listview" data-style="inset">
<li><a href="#vMyDatabase">This Breaks</a></li>
<li><a href="#vMyDatabase2">This Works</a></li>
</ul>
</div>
<div data-role="view" data-model="viewModel" data-title="My Database" id="vMyDatabase">
<ul id="lMyDatabase" data-role="listview" data-style="inset" data-template="tMyDatabase" data-bind="source: MyDatabase">
</ul>
</div>
<div data-role="view" data-title="My Database" id="vMyDatabase2" data-init="initTest">
<ul id="lMyDatabase2" data-role="listview" data-style="inset" data-template="tMyDatabase"
>
</ul>
</div>
<script id="tMyDatabase" type="text/x-kendo-template">
<div style="font-weight:bold;">#= Name #</div>
<div style="font-weight:normal;font-size:smaller">#= City #, #= State #</div>
<div style="font-weight:normal;font-size:smaller">ID: #= ID #</div>
</script>
JavaScript
var TestData = [
{ Name: "Company A", City: "Phoenix", State: "AZ", ID: "00000001" },
{ Name: "Company B", City: "Los Angeles", State: "CA", ID: "00000002" },
{ Name: "Company C", City: "Santa Fe", State: "NM", ID: "00000003" },
{ Name: "Company D", City: "Boulder", State: "CO", ID: "00000004" },
{ Name: "Company E", City: "Seattle", State: "WA", ID: "00000005" },
{ Name: "Company F", City: "Portland", State: "OR", ID: "00000006" },
{ Name: "Company G", City: "San Diego", State: "CA", ID: "00000007" },
{ Name: "Company H", City: "Boise", State: "ID", ID: "00000008" },
];
var app = new kendo.mobile.Application($(document.body), {
initial: "vHome"
});
var viewModel = kendo.observable({
ShowCustomer: function (e) {
// something here for drilldown
console.log("show customer");
},
MyDatabase: new kendo.data.DataSource.create({ data: TestData })
});
var dsMyDatabase = new kendo.data.DataSource.create({ data: TestData })
function initTest() {
$("#lMyDatabase2").kendoMobileListView({
dataSource: dsMyDatabase,
template: $("#tMyDatabase").text(),
style: "inset",
click: function (e) {
// something here for drilldown
console.log("click event");
}
});
}