Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

How to Use Data Autosyncronization When Editing the Kendo Grid Cells

0.00/5 (No votes)
4 Dec 2015CPOL2 min read 14.5K  
This tip resolves the problem of Kendo Grid losing the focus after editing in autoSynch mode.

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.

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:
    JavaScript
    var mouseDown = false;
    document.body.onmousedown = function() {
      mouseDown = true;
    }
    document.body.onmouseup = function() {
      mouseDown = false;
    }
  2. Declare two variables:
    JavaScript
    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:
    JavaScript
    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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)