MVVM

by lhoeppner

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css">
<div id="grid"></div>

JavaScript

var grid;

$(document).ready(function () {
    initGrid();
});


function initGrid() {
    grid = $("#grid").kendoGrid({
        sortable: true,
        dataSource: [{
            name: "Jane Doe",
            age: 30
        }, {
            name: "John Doe",
            age: 33
        }],
        columns: [{
            field: "name"
        }, {
            field: "age"
        }, {
            field: "rowNumber",
            title: "Row number",
            template: "<span class='row-number'></span>"
        }],
        dataBound: function () {
            var rows = this.items();
            $(rows).each(function () {
                var index = $(this).index() + 1;
                var rowLabel = $(this).find(".row-number");
                $(rowLabel).html(index);
            });
        }
    }).data("kendoGrid");
}