Как сделать автосинхронизацию данных во время редактирования ячеек Kendo Grid

  • Tutorial
Хотим поделиться со всеми переводом нашей недавней статьи с 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, и после этого заново переводит сохраненную ячейку в режим редактирования. Выглядит не очень просто, но прекрасно работает.
databoom
Company
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 7

    0
    Вы серьезно? Форматирование для слабаков?
      0
      Я понимаю что Т. З., но постоянно перескакивать с мыши на клавиатуру не очень удобно. Удобнее было бы сделать открытие следующей ячейки на редактирование в строке по табу а в колонке по стрелке вниз. Немного кода написать придётся но в Kendo это реализуемо.
        0
        Переход по табу на следующую ячейку делается легко. Но возникает проблема если человек переходит к редактированию по клику — тогда теряется редактор во время автосинхронизации. Естественно что по табу переходить удобнее — но в некоторых случаях пользователи пользуются и мышью — и тогда потеря редактора может раздражать пользователя.
          0
          А нельзя пример с потерей редактора на Dojo показать или на Jsfiddle? Я очень активно пользуюсь гридом, но пока с потерей редактора не сталкивался или просто не обратил внимания.
            0
            Есть стандартный пример demos.telerik.com/kendo-ui/grid/editing-inline
            если в нем в datasource написать autoSync: true,
            а далее в свойствах грида поменять тип редактирования
            editable: «incell»
            то он теряет редактор при автосинхронизации с удаленным сервером
            ______________
            вот пример
            dojo.telerik.com/IwiNi/2
              0
              В вашем примере редактор на Chrome и FF не теряется. Ошибка, теряется, спасибо.
                0
                Не хотите кинуть ваш пример им в багтрекер? А еще лучше открыть тикет?

        Only users with full accounts can post comments. Log in, please.