Kendo UI

jQuery + Kendo UI + MockJax

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css">
<div id="example" class="k-content">
            <table id="netflixTable">
                <thead>
                    <tr>
                        <th data-field="Name">
                            Cover
                        </th>
                        <th data-field="Name">
                            Title
                        </th>
                        <th data-field="AverageRating">
                            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="altTemplate" type="text/x-kendo-tmpl">
                <tr>
                    <td>
                         <img src="${ BoxArt.SmallUrl }" alt="${ Name }" />
                    </td>
                    <td>
                        ${ Name }
                    </td>
                    <td>
                        ${ AverageRating }
                    </td>
                </tr>
            </script>

JavaScript

$("#netflixTable").kendoGrid({
    dataSource: {
         pageSize: 3,
        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()),
    //defines altRowTemplate
    altRowTemplate: kendo.template($("#altTemplate").html()),
    editable:"inline",
    sortable:true,
    selectable: "multiple",
    pageable: true,
    scrollable: true,                     
    resizable: true,
    toolbar:["create", { "name": "save", "text": "Save This Record" },{ "name": "cancel" }],
});