kendo listview and template
HTML
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="listView"></div>
<br />
<div id="display">
</div>
<script id="template" type="text/x-kendo-template">
<div class="display">
#if(Job == "IT Guy") {{ #
Hi
# }} else {{ #
<p> #= Job #</p>
<p> #= Person.Name #</p>
# }} #
</div>
</script>
CSS
#listView {
width: 100px;
margin: 0 auto;
}
JavaScript
var dataSource = new kendo.data.DataSource({
transport: {
read: {
//using jsfiddle echo service to simulate JSON endpoint
url: "/echo/json/",
dataType: "json",
type: "POST",
data: {
// /echo/json/ echoes the JSON which you pass as an argument
json: JSON.stringify([
{
"Id": "1",
"People": [{
"Person": {
"Name": "Jon"
},
"Job": "IT Guy"
}]
},
{
"Id": "2",
"People": [{
"Person": {
"Name": "Kate"
},
"Job": "Web Developer"
}]
}
])
}
}
}
});
$("#listView").kendoListView({
dataSource: dataSource,
template: "<div style='padding: 10px; border: 1px solid red;'>#= Id # </div>",
selectable: "single",
change: function(e) {
var index = this.select().index();
var dataItem = this.dataSource.at(index);
var template = kendo.template($("#template").html());
$("#display").html(kendo.render(template, dataItem.People));
}
});