Я искал способ автоматически сохранять отредактированные данные сетки на стороне клиента, когда пользователь переходит на другую строку (точно так же, как в Access, в студии управления sql и т. Д.). Это действительно кажется сложной задачей.

Одна из схем заключалась в использовании синхронизации источника данных, но при этом возникала проблема потери положения нашей ячейки (она всегда переходила в ячейку 0, 0).

Мне показали некоторые умные обходные пути (вернитесь в камеру после случая, что, кстати, очень ценно, спасибо), но после некоторого длительного тестирования (мной и другими) это показалось немного "глючным" (возможно Мне просто нужно поработать над этим больше)

В любом случае, я хотел исследовать, возможно, не использовать эту синхронизацию источника данных, а, возможно, просто выполнять вызовы на стороне сервера «вручную» (что немного жаль, но если это то, что нам нужно сделать, пусть будет так). Если я сделаю это, я бы хотел сбросить индикаторы "грязных" красных ячеек.

Я подумал, что могу использовать что-то похожее на эту схему (кроме сброса флага, я хочу его снять).

Итак, как в приведенной выше ссылке, у меня есть следующее ..

 var pendingChanges = [];

 function gridEdit(e) {
   var cellHeader = $("#gridID").find("th[data-field='" + e.field + "']");
   if (cellHeader[0] != undefined) {
      var pendingChange = new Object();         
     pendingChange.PropertyName = e.field;        
     pendingChange.ColumnIndex = cellHeader[0].cellIndex;        
     pendingChange.uid = e.items[0].uid;
     pendingChanges.push(pendingChange);
    }
   }

Где мы вызываем gridEdit из изменения источника данных ..

var dataSrc = new kendo.data.DataSource({
change: function (e) {
  gridEdit(e);
},

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

// clear cell property (red indicator)
for (var i = 0; i < pendingChanges.length; i++) {
  var row = grid.tbody.find("tr[data-uid='" + pendingChanges[i].uid + "']");
  var cell = row.find("td:eq(" + pendingChanges[i].ColumnIndex + ")");

  if (cell.hasClass("k-dirty-cell")) {
    cell.removeClass("k-dirty-cell");

    console.log("removed dirty class");
  }
}

pendingChanges.length = 0;

// No good, we loose current cell again! (sigh..)
//grid.refresh();

Когда это не сработало, я также попытался сбросить флаг грязи источника данных.

// clear dirty flag from the database
var dirtyRows = $.grep(vm.gridData.view(),
  function (item) {
    return item.dirty == true;
  })

if (dirtyRows && dirtyRows.length > 0) {
  dirtyRows[0].dirty = false;
}

демо здесь

После того, как ничего из вышеперечисленного не сработало, я попробовал grid.refresh (), но это имеет ту же проблему, что и синхронизация источника данных (мы теряем нашу текущую ячейку)

Кто-нибудь знает, как я могу очистить этот индикатор ячейки, не обновляя всю сетку, которая, кажется, полностью теряет наш контекст редактирования?

Заранее благодарю за любую помощь!

3
peterc 22 Фев 2015 в 11:48

3 ответа

Лучший ответ

CSS:

.k-dirty-clear {
  border-width:0;
}

Событие редактирования сетки:

  edit: function(e) {
    $("#grid .k-dirty").addClass("k-dirty-clear"); //Clear indicators
    $("#grid .k-dirty").removeClass("k-dirty-clear"); //Show indicators
  }

http://jsbin.com/celajewuwe/2/edit

5
softawareblog.com 23 Фев 2015 в 07:42

Это также можно сделать, применив стиль ниже,

<style>
  .k-dirty{
    display: none;      
  }
</style>
1
SharK 18 Окт 2018 в 20:11

Простое решение этой проблемы - заменить цвет " флага " прозрачным. просто переопределите класс " .k-dirty " ( border-color ) просто добавив приведенные выше строки в ваш css

CSS:

//k-dirty is the class that kendo grid use for mark edited cells that not saved yet. 
//we override that class cause we do not want the red flag
.k-dirty {
    border-color:transparent transparent transparent transparent;
}
1
Oren Gatigno 22 Авг 2016 в 15:46