Knockout kendo grid - remote data

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.debug.js"></script>
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.common.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<div data-bind="with: selectedData">
    <div data-bind="text: CustomerID"></div>
    <div data-bind="text: ShipAddress"></div>
</div>
<hr />
<div data-bind='kendoGrid: gridConfig'></div>

JavaScript

var ViewModel = function() {
    var self = this;
    this.gridConfig = {
        data: null,                            
        dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                Freight: { type: "number" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShipCity: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },
                height: 250,
                filterable: true,
                sortable: true,
                pageable: true,
                columns: [{
                        field:"OrderID",
                        filterable: false
                    },
                    "Freight",
                    {
                        field: "OrderDate",
                        title: "Order Date",
                        width: 100,
                        format: "{0:MM/dd/yyyy}"
                    }, {
                        field: "ShipName",
                        title: "Ship Name",
                        width: 200
                    }, {
                        field: "ShipCity",
                        title: "Ship City"
                    }
                ],
                selectable: "row",
                change: function(event) {
                    self.selectedData(this.dataItem(this.select()[0]));
                }
            };
    
    this.selectedData =...