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">
    <table class="table">
        <tr>
            <td>Commentator</td>
            <td>#:approver#  <input type="text" id="txtinput" name="txtinput"></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>
    </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!'},
        {"id": 2, "approver": "Larry F", "approvalDate": "4/20/2014", stepId: 2, status: "Approved", comments: 'Nice work'}
    ];
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);
}
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;
        console.log($('#txtinput'));
        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]);
    }
});