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.319/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'></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:{dataBound:gridBound,save:saveFocus}'></div>
</div>
JavaScript
var data = [{
id: 1,
name: 'test',
orderdate: new Date(),
field2: 2,
field3: 3,
field4: 4
}, {
id: 2,
name: 'test2',
orderdate: new Date(),
field2: 2,
field3: 3,
field4: 4
}];
var vm = new kendo.observable({
saveFocus: function (e) {
vm.focusID = e.model.uid;
var td = e.container;
vm.focusCellIndex = td[0].cellIndex;
if(vm.goNext) { vm.focusCellIndex = td[0].next().cellIndex; }
},
gridBound: function (e) {
var grid = e.sender;
vm.goNext = false;
grid.on("focus", "td", function (e) {
$("input").on("keydown", function (event) {
if (event.ta == 13 && event.ta == 9) {
vm.goNext = true;
return false;
}
});
});
if (vm.focusID) {
var row = grid.items().filter("tr[data-uid=" + vm.focusID + "]");
var cell = row.find("td:eq(" + vm.focusCellIndex + ")");
console.warn(cell);
grid.current(cell);
}
vm.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) {
//simulate a delay
setTimeout(function () {
options.success(response);
...