editor & dataSource

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<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">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<table id="netflixTable">
    <thead>
        <tr>
            <th>
                Cover
            </th>
            <th>
                Title
            </th>
            <th>
                Rating
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="3"></td>
        </tr>
    </tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr>
        <td>
            <img src="${ BoxArt.SmallUrl }" alt="${ Name }" />
        </td>
        <td>
            ${ Name }
        </td>
        <td>
            ${ AverageRating }
        </td>
    </tr>
</script>

<script id="altRowTemplate" type="text/x-kendo-tmpl">
    <tr class="k-alt">
        <td>
            <img src="${ BoxArt.SmallUrl }" alt="${ Name }" />
        </td>
        <td>
            ${ Name }
        </td>
        <td>
            ${ AverageRating }
        </td>
    </tr>
</script>

JavaScript

$("#netflixTable").kendoGrid({
    dataSource: {
        type: "odata",
        serverFiltering: true,
        filter: [{
            field: "Name",
            operator: "contains",
            value: "Star Wars"
            },{
            field: "BoxArt.SmallUrl",
            operator: "neq",
            value: null
        }],
        transport: {
            read: "http://odata.netflix.com/Catalog/Titles"
        }
    },
    rowTemplate: kendo.template($("#rowTemplate").html()),
    altRowTemplate: kendo.template($("#altRowTemplate").html()),
    height: 500
});