How to Use Data Autosyncronization When Editing the Kendo Grid Cells

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.

1. Set up event handling before initializing the grid:

   var mouseDown = false;
   document.body.onmousedown = function() {
     mouseDown = true;
   }
   document.body.onmouseup = function() {
     mouseDown = false;
   }

2. 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.

3. 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.