Kendo UI

jQuery + Kendo UI + MockJax

by wolfpackt99

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
                <div class="description">
                    #=Description#
                </div>

            </script>

CSS

.description {
background-color: #CCC;
}

JavaScript

var data = createRandomData(50);
for (var i = 0; i < data.length; i++) {
    data[i].Description = "werer werwer wer wer wer ewrwerwer ewr wer wer wer werwe rwe rwe rwer wer wer we rwe rwe rwe rwe rwer";
}

$("#grid").kendoGrid({
    dataSource: {
        data: data,
        schema: {
            model: {
                fields: {
                    FirstName: {
                        type: "string"
                    },
                    LastName: {
                        type: "string"
                    },
                    Description: {
                        type: "string"
                    }
                }
            }
        },
        pageSize: 10
    },
    height: 250,
    scrollable: true,
    sortable: true,
    filterable: true,
    pageable: {
        input: true,
        numeric: false
    },
    columns: [
        {
        field: "FirstName",
        title: "First Name",
        width: 100},
    {
        field: "LastName",
        title: "Last Name",
        width: 100}
    ],
    detailTemplate: kendo.template($("#template").html()),
    detailInit: detailInit,
});

function detailInit(e) {
    var detailRow = e.detailRow;
}