Хотим поделиться со всеми переводом нашей недавней статьи с Codeproject.com: «Как сделать автосинхронизацию данных во время редактирования ячеек Kendo Grid».

Kendo Grid использует DataSource, в котором свойство autoSync можно выставить в true. В этом случае после редактирования ячейки она автоматически обновляет данные в базе. Но при этом возникает большое неудобство: после того, как мы отредактировали одну ячейку и кликаем в другую, Kendo Grid вроде бы открывает редактор в новой ячейке. Но в этот самый момент происходит автосинхронизация (Grid обновляет данные), и редактор исчезает. Приходится кликать дважды, во вторую ячейку, чтобы заставить Kendo Grid ее редактировать.

Хочется, чтобы при редактировании ячеек в режиме автосинхронизации поведение Kendo Grid было похоже на общепринятое, чтобы при клике на редактируемую ячейку сразу становилось возможным ее редактирование и не приходилось для этого кликать дважды.

Для этого нужно сделать немало.

1. Перед инициализацией Grid-a нужно выставить обработку событий:

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

2. Затем завести 2 переменные:

var saved = false;
var saved2 = false;

saved выставляется при сохранении данных в DataSource, saved2 – после синхронизации данных с удаленной базой.

3. Выставить обработчики событий edit и save в 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 вызывает событие edit только после системного события mousesup. Если синхронизация произойдет до этого момента, то event edit будет потерян и Grid не выставит редактор в новую ячейку. Поэтому во время события save мы вызываем функцию sync2db, которая по таймеру откладывает синхронизацию до момента, когда произошел event mouseup.

Но всего этого недостаточно. После синхронизации, редактор все равно будет потерян (так ведет себя Kendo Grid). Поэтому, обработчик edit запоминает редактируемую ячейку и после синхронизации опять переводит ее в режим редактирования. Для этого обработчик edit вызывает функцию resetEditor, которая по таймеру дожидается, когда после синхронизации будет выставлена переменная saved2, и после этого заново переводит сохраненную ячейку в режим редактирования. Выглядит не очень просто, но прекрасно работает.