KendoUI Grid base

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<div id="content">
    <div>
        <div id="grid" data-role="grid" data-bind="source: ordersSource, events: { change: change }"
                        data-selectable="true" data-columns='["OrderID", "ShipName", "ShipCity"]' />
    </div>
    <div style="margin: 10px" data-bind="visible: selectedRow">
        <h2>Edit client</h2>
        <label>Order id</label>
        <input type="text" readonly="true" data-bind="value: selectedRow.OrderID" />
        <br />
        <label>Ship Name</label>
        <input type="text" data-bind="value: selectedRow.ShipName" />
        <br />
        <label>Ship City</label>
        <input type="text" data-bind="value: selectedRow.ShipCity" />
    </div>                                
</div>

JavaScript

var ordersDatasource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema: {
        model: {
            id: "OrderID",
            fields: {
                OrderID: { type: "number" },
                ShipName: { type: "string" },
                ShipCity: { type: "string" }
            }
        }
    },
    pageSize: 5,
});

var viewModel = kendo.observable({
    ordersSource: ordersDatasource,
    selectedRow: null,

    change: function(eventArgs) {
        this.set("selectedRow", eventArgs.sender.dataItem(eventArgs.sender.select()));
    }
});

kendo.bind($('#content'), viewModel);