Kendo/Netflix/Grid OData with JSONP

by JayData

HTML

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/kendo.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<div id="grid"></div>

CSS

body {
    font-family:Calibri;
}

JavaScript

$(function () {
    OData.defaultHttpClient.enableJsonpCallback = true;

    var BoxArt = $data.define("BoxArt", {
        SmallUrl: String,
        MediumUrl: String
    });

    var Title = $data.define("Title", {
        Id: {
            type: String,
            key: true
        },
        Name: String,
        ReleaseYear: $data.Integer,
        ShortName: String,
        BoxArt: BoxArt
    });



    $('#grid').kendoGrid({
        dataSource: Title.asKendoDataSource({
            provider: 'oData',
            url: 'http://odata.netflix.com/v2/Catalog/Titles',
            pageSize: 5,
            sort: [{
                field: "ReleaseYear",
                dir: "desc"
            }, {
                field: "Name",
                dir: "asc"
            }]
        }),
        filterable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        pageable: true,
        columns: ['Name', 'ReleaseYear', {
            field: 'BoxArt',
            filterable: false,
            sortable: false,
            template: '<div><img src=#=BoxArt.SmallUrl# /></div>'
        }]
    });
});