Introduction
Kendo Grid uses the DataSource that allows setting autoSync = true
. This setting means that data is automatically renewed after editing. But there is a big inconvenience when using DataSource in autoSync
mode: after editing a cell and clicking into another cell, Kendo Grid opens editor in new cell. At the same moment autosynchronization happens, the Grid renews data and the editor disappears. You have to perform another click to make Kendo Grid to run editor again. So each time you want to change cell when editing the Grid, you have to click twice.
It is desirable when editing the Kendo Grid cells to make the Kendo Grid behavior similar to the conventional: clicking the cell only once in order to edit it.
To make this possible, you will need to perform a couple of actions.
- Set up event handling before initializing the grid:
var mouseDown = false;
document.body.onmousedown = function() {
mouseDown = true;
}
document.body.onmouseup = function() {
mouseDown = false;
}
- Declare two variables:
var saved = false;
var saved2 = false;
saved
variable is set to true
when saving data into DataSource, the same way saved2
is set to true
after data synchronization with the remote database.
- Set up
edit
and save
event handlers in the Grid:
edit: function(e) {
if (saved) {
saved = false;
var grid = e.sender;
var col = e.container.context.cellIndex;
var row = e.container.context.parentNode.rowIndex;
function resetEditor(){
if(!saved2)
setTimeout(resetEditor,100);
else{
saved2 = false;
var cell = $(grid.tbody).find("tr:eq(" +row+ ") td:eq(" + col + ")");
grid.editCell(cell)
grid.table.focus();
}
};
resetEditor();
}
},
save: function(e) {
saved = true;
saved2 = false;
var grid = e.sender;
function sync2db(){
if(mouseDown)
setTimeout(sync2db,50);
else{
setTimeout(function() {
grid.dataSource.sync().then(function(){
saved2 = true;
});
},10)
}
};
sync2db();
},
Kendo Grid calls the edit
event only after the system event mousesup
. If the synchronization happens before that moment, then the edit
event will be lost and the Grid won't set the editor into the second cell. To prevent that, we call the sync2db
function. This function puts off the synchronization until the mouseup
event happens.
But this isn't enough. After synchronization, the editor will be lost anyway (that's how the Kendo Grid behaves). That's why the edit
event handler stores the cell to be edited and after synchronization puts it into the edit mode. To do that, the edit
handler calls the resetEditor
function. That function waits for the variable saved2
to be set after the synchronization and then puts the saved cell into edit mode. Looks not very simple, but works perfectly.