Kendo UI Web Grid

A simple example showing how to use the DataSource with a Grid widget.

by jbristowe

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css "></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/examples/shared/styles/examples.min.css">
<table id="netflixTable">
    <thead>
        <tr>
            <th>Title</th>
            <th>URL</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2"></td>
        </tr>
    </tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr>
        <td>${ Title }</td>
        <td><a href="${ URL }">${ URL }</a></td>
    </tr>
</script>

JavaScript

var sampleData = [
    { "Title": "The Code Project", "URL": "http://codeproject.com/" },
    { "Title": "Kendo UI", "URL": "http://kendoui.com/" }
];

$("#netflixTable").kendoGrid({
    dataSource: kendo.data.DataSource.create(sampleData),
    rowTemplate: kendo.template($("#rowTemplate").html())
});