or
<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
link
href
=
"http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"http://cdn.kendostatic.com/2013.3.1119/js/jquery.min.js"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
data-role
=
"splitview"
>
<
div
data-role
=
"pane"
data-layout
=
"side-default"
data-transition
=
"slide"
>
<
div
data-role
=
"layout"
data-id
=
"side-default"
data-show
=
"toggleBackButton"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
div
>
</
div
>
<
div
data-role
=
"view"
data-title
=
"Empty Pane"
>
Empty Pane
</
div
>
</
div
>
<
div
data-role
=
"pane"
data-layout
=
"main-default"
id
=
"main-pane"
>
<
div
data-role
=
"view"
data-title
=
"Categories"
id
=
"side-root"
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-source
=
"splitViewCategories"
data-template
=
"categoriesTemplate"
>
</
ul
>
</
div
>
<
script
id
=
"categoriesTemplate"
type
=
"text/x-kendo-template"
>
<
a
href
=
"\#side-inbox?CategoryID=#: CategoryID#"
data-target
=
"main-pane"
>#: CategoryName #</
a
>
</
script
>
<
script
id
=
"productsTemplate"
type
=
"text/x-kendo-template"
>
<
a
href
=
"\#orders?ProductID=#: ProductID #"
data-target
=
"main-pane"
>
<
span
class
=
"date"
>$#: UnitPrice#</
span
>
<
h3
>#: ProductName #</
h3
>
<
span
class
=
"excerpt"
>#: QuantityPerUnit #</
span
>
</
a
>
</
script
>
<
div
data-role
=
"view"
id
=
"side-inbox"
data-title
=
"Products"
data-show
=
"filterProducts"
>
<
ul
data-role
=
"listview"
data-auto-bind
=
"false"
data-source
=
"splitViewProducts"
data-template
=
"productsTemplate"
>
</
ul
>
</
div
>
<
script
type
=
"text/x-kendo-template"
id
=
"ordersTemplate"
>
<
dl
>
<
dt
>Discount</
dt
>
<
dd
>#: Discount #</
dd
>
<
dt
>Quantity</
dt
>
<
dd
>#: Quantity #</
dd
>
<
dt
>UnitPrice</
dt
>
<
dd
>#: UnitPrice #</
dd
>
</
dl
>
</
script
>
<
div
data-role
=
"view"
data-title
=
"Orders"
id
=
"orders"
data-show
=
"displayOrder"
>
<
div
id
=
"product-details"
>
</
div
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"main-default"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
a
id
=
"back-button"
class
=
"nav-button"
data-align
=
"left"
data-role
=
"backbutton"
>Back</
a
>
<
span
data-role
=
"view-title"
></
span
>
<
a
data-role
=
"button"
href
=
"#index"
data-align
=
"right"
data-target
=
"_top"
>Index</
a
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
var categoryID = null;
var splitViewCategories = new kendo.data.DataSource({
type: "odata",
transport: {
}
});
var splitViewProducts = new kendo.data.DataSource({
type: "odata",
serverFiltering: true,
transport: {
read: {
}
}
});
var splitViewOrderDetails = new kendo.data.DataSource({
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
}
},
change: function () {
var template = kendo.template($("#ordersTemplate").text());
$("#product-details").html(kendo.render(template, this.data()));
}
});
function displayOrder(e) {
splitViewOrderDetails.filter({
field: "ProductID",
operator: "eq",
value: parseInt(e.view.params.ProductID)
});
splitViewOrderDetails.read();
}
function filterProducts(e) {
splitViewProducts.filter({
field: "CategoryID",
operator: "eq",
value: parseInt(e.view.params.CategoryID)
});
splitViewProducts.read();
}
function toggleBackButton(e) {
if (e.view.id === "#side-inbox") {
e.view.element.find("[data-role=backbutton]").css("visibility", "");
} else {
e.view.element.find("[data-role=backbutton]").css("visibility", "visible");
}
}
</
script
>
<
style
scoped>
#side-inbox .date {
float: right;
color: rgba(200,200,200,.8);
font-size: .7em;
font-weight: normal;
}
#side-inbox .excerpt {
clear: both;
font-size: .7em;
font-weight: normal;
}
#side-inbox .km-content h3 {
margin-left: 0;
}
#main-pane .km-content{
padding: 30px;
}
#main-pane dl {
float: left;
margin: 0;
padding: 0 0 20px 0;
}
#main-pane dl:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#main-pane dt, #main-pane dd {
display: block;
float: left;
margin: 0;
padding: 0;
}
#main-pane dt {
clear: left;
text-align: right;
padding: 0 10px;
}
</
style
>
<
script
>
var app = new kendo.mobile.Application(document.body);
</
script
>
</
body
>
</
html
>