Kendo

by marhaba

HTML

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

JavaScript

$(function() {
    $("#grid").kendoGrid({
        columns: [
            {
                field: "FirstName",
                title: "First Name"
            },
            {
                field: "LastName",
                title: "Last Name"
            },
            {
                field: "Title"
            }
        ],
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
            }
        },
        height: 450,
        sortable: true,
        pageable: true,
        detailTemplate: "<h2 style='background-color: yellow;'>Expanded!</h2>",
        detailExpand: function(e) {
            this.collapseRow(this.tbody.find(' > tr.k-master-row').not(e.masterRow));
        }
    });
});