Simple ListView Example

A simple example of the ListView widget for Kendo UI Web. This binds to the search result from the Twitter API.

by vrluckyin India

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.silver.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<div id="pager"></div>
<div id="listView"></div>
<script id="notes-template" type="text/x-kendo-template">
    <p>#:approver#</p>
</script>
<script type="text/x-kendo-tmpl" id="template" onload="templateGrid(this)">
    <table class="table">
        <tr>
            <td>Commentator</td>
            <td>#:approver#</td>
        </tr>
        <tr>
            <td>Approval Date/Time</td>
            <td>#:approvalDate#</td>
        </tr>
        <tr>
            <td>Status</td>
            <td>#:status#</td>
        </tr>
        <tr>
            <td></td>
            <td>#:comments#</td>
        </tr>
        <tr>
            <td colspan="2">
            	<div id="grid"></div>
            </td>
        </tr>
    </table>
</script>

CSS

span.k-pager-nav
{
  display:none!important;
}

JavaScript

var data = [
        {"id": 1, "approver": "Gordon D", "approvalDate": "2/1/2014", stepId: 1, status: "Approved", comments: 'Good job!', grid:[{name:"first", value:"1"},{name:"second", value:""}]},
        {"id": 2, "approver": "Larry F", "approvalDate": "4/20/2014", stepId: 2, status: "Approved", comments: 'Nice work', grid:[{name:"first", value:"2"},{name:"second", value:""}]},
         {"id": 3, "approver": "Vipul", "approvalDate": "4/20/2016", stepId: 3, status: "Rejected", comments: 'Nice work 11111111', grid:[{name:"first", value:"3"},{name:"second", value:""}]}
    ];
function templateGrid(d){
console.log($('#grid'));
setTimeout(function()
	{ 
  console.log($("#pager").data('kendoPager'));
  var ds =  new kendo.data.DataSource({ data: d.grid });
  	 $("#grid").kendoGrid({
            dataSource: ds,
            columns: [
                { field: "name", title: "Name", width: "20%" },
                { field: "value", title: "value", width: "20%" },
            ]
        });
  	console.log($('#grid')); 
  }, 300
  );
}

var dataSource = new kendo.data.DataSource({
        data: data,
        pageSize:1
    });

function renderPagerInfo(d) {
    var h =  kendo.Template.compile($('#notes-template').html())(d);
    $('.k-current-page').html(h);
    templateGrid(d);
    
}
var pager = $("#pager").kendoPager({
    dataSource: dataSource,
    pageSize: 1,
  	buttonCount: 1,
  	info: false,
  	input: false,
    change: function(e) {
    		console.log(e);
        console.log(data);
        var i = e.index - 1;
        renderPagerInfo(data[i]);
        console.log("pager change event " + e.index);
      }
});

$("#listView").kendoListView({
    selectable: false,
    dataSource: dataSource,
    template: kendo.template($("#template").html()),
    dataBound: function() {
        renderPagerInfo(data[0]);
    }
});