AutoSync Grid

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.metro.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<div id='container'>
    <div>These Grids Share Data so changes in one should reflect the other!</div>
    <br/>
    <div data-role='grid' data-scrollable='false' data-sortable='true' data-pageable='{buttonCount:5}' data-editable='true' data-navigatable='true' data-bind='source:dsGrid' data-columns='[{field:"name",title:"Name"},{field:"orderdate",title:"Order Date", format:"{0:d}",width: 120}]'></div>
    <br/>
    <div data-role='grid' data-scrollable='false' data-sortable='true' data-pageable='{buttonCount:5}' data-editable='true' data-navigatable='true' data-bind='source:dsGrid, events: { save: save, dataBound: dataBound }'  data-columns='[{field:"name",title:"Name"},{field:"orderdate",title:"Order Date", format:"{0:d}",width: 120}]'></div>
</div>

JavaScript

var data = [{
    id: 1,
    name: 'test',
    orderdate: new Date()
}, {
    id: 2,
    name: 'test2',
    orderdate: new Date()
}];


var focusID;

var vm = new kendo.observable({
    save: function(e) {
        focusID = e.model.id;
    },    
    dataBound: function(e) {
        var grid = e.sender;        
        if (focusID) {
            var model = grid.dataSource.get(focusID);
            if (model) {                                                
                grid.current(grid.items().filter("[data-uid=" + model.uid + "]").find("td:first"));
            }
        }
        focusID = null;
    },
    dsGrid: new kendo.data.DataSource({
        transport: {
            read: function (options) {
                console.warn('read');
                //we are just sending back our data
                options.success(data);
            },
            update: function (options) {
                console.warn('update');
                //send this to our web service.
                //I would be ok using the normal url based transport here, 
                //but cannot get that to work when read is a function
                $.ajax({
                    url: "/echo/json/",
                    data: options.data,
                    type: "POST",
                    success: function (response) {
                        options.success(response);
                    }
                });
            }
        },
        schema: {
            model: {
                id: 'id'
            }
        },
        autoSync: true,
        pageSize: 10 //needed to add to having paging show appropriately
    })
});

kendo.bind($('#container'), vm);