Knockout kendo grid - remote data

by visibleinvisibly

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='kendoGrid: gridConfig'></div>

JavaScript

//verify the data attribute
var ViewModel = function() {
    this.gridConfig = {
        data: null,                            
        dataSource: {
                    type: "xml",
                    transport: {
                        read: "http://demos.kendoui.com/service/Northwind.svc/Products"
                    },
                     schema: {
                         // specify the the schema is XML
                         type: "xml",
                         data: "/feed/entry/content/properties",
                         model: {
                              fields: {
                                    ProductID: "ProductID/text()",
                                    ProductName: "ProductName/text()",
                                    UnitPrice: "UnitPrice/text()"
                                    }
                                }
                            },
                    pageSize: 10,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },
                height: 250,
                filterable: true,
                sortable: true,
                pageable: true,
                columns: [{
                      field: 'ProductID',
            					title: 'ProductID'
                    },
                    {
                      field: 'ProductName',
            					title: 'ProductName'
                    },
                    {
                      field: 'UnitPrice',
            					title: 'UnitPrice'
                    }

                ]
            };
};

ko.applyBindings(new ViewModel());