Хотим поделиться со всеми переводом нашей недавней статьи с 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, и после этого заново переводит сохраненную ячейку в режим редактирования. Выглядит не очень просто, но прекрасно работает.

Комментарии (7)


  1. uSide
    14.12.2015 17:49

    Вы серьезно? Форматирование для слабаков?


  1. Casufi
    14.12.2015 21:00

    Я понимаю что Т. З., но постоянно перескакивать с мыши на клавиатуру не очень удобно. Удобнее было бы сделать открытие следующей ячейки на редактирование в строке по табу а в колонке по стрелке вниз. Немного кода написать придётся но в Kendo это реализуемо.


    1. databoom
      15.12.2015 13:04

      Переход по табу на следующую ячейку делается легко. Но возникает проблема если человек переходит к редактированию по клику — тогда теряется редактор во время автосинхронизации. Естественно что по табу переходить удобнее — но в некоторых случаях пользователи пользуются и мышью — и тогда потеря редактора может раздражать пользователя.


      1. Casufi
        16.12.2015 11:37

        А нельзя пример с потерей редактора на Dojo показать или на Jsfiddle? Я очень активно пользуюсь гридом, но пока с потерей редактора не сталкивался или просто не обратил внимания.


        1. databoom
          17.12.2015 13:02

          Есть стандартный пример demos.telerik.com/kendo-ui/grid/editing-inline
          если в нем в datasource написать autoSync: true,
          а далее в свойствах грида поменять тип редактирования
          editable: «incell»
          то он теряет редактор при автосинхронизации с удаленным сервером
          ______________
          вот пример
          dojo.telerik.com/IwiNi/2


          1. Casufi
            18.12.2015 13:25

            В вашем примере редактор на Chrome и FF не теряется. Ошибка, теряется, спасибо.


          1. Casufi
            18.12.2015 13:28

            Не хотите кинуть ваш пример им в багтрекер? А еще лучше открыть тикет?