Kendo Grid：删除脏单元格指示器答案

【问题标题】：Kendo Grid: Removing dirty cell indicatorsKendo Grid：删除脏单元格指示器
【发布时间】：2015-02-22 08:48:29
【问题描述】：

我一直在寻找一种在用户更改到另一行时自动保存客户端编辑的网格数据的方法（就像在访问、sql 管理工作室等中一样）。这似乎真的有点挑战。

一种方案是使用数据源同步，但这有丢失我们的单元格位置的问题（它总是跳到单元格0、0）。

我已经看到了一些巧妙的解决方法（在案件结束后回到牢房，顺便说一句，非常感谢谢谢），但经过一些长时间的测试（由我自己和其他人）似乎有点“小故障”（也许我只需要更多地工作）

无论如何，我想探索也许不使用这个数据源同步，也许只是“手动”进行服务器端调用（有点遗憾，但如果这是我们需要做的，那就这样吧） .如果我这样做，我想重置单元格小红格“脏”指示器。

我想我可以使用类似于this scheme 的东西（除了重置标志，我想取消设置）。

所以，如上面的链接，我有以下..

 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;
}

demo here

在上述方法均无效后，我尝试了 grid.refresh()，但这与数据源同步存在相同的问题（我们丢失了当前单元格）

有人知道如何清除这个单元格指示器，而不刷新似乎完全失去我们编辑上下文的整个网格吗？

提前感谢您的帮助！

【问题讨论】：

标签： kendo-ui kendo-grid

【解决方案1】：

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

【讨论】：

您好 Tarek，感谢您的回复。 css 实际上阻止了红色指示器的出现（所以我们永远看不到它）。当我们编辑一个单元格时，我仍然希望有这个设置，但是可以在以后的某个阶段将其删除（以编程方式 - 在我的情况下，当调用 vm.rowChangedCallback 时，即当您使用 tab 转到新行时）。
@Terek，非常感谢！通过应用 $("#grid .k-dirty").addClass("k-dirty-clear");它会清除指标，然后如果我重新编辑单元格，则会再次设置它们。这正是我所追求的！干杯。
- 对不起，我拼错了你的名字（并且可以更长的编辑）！干杯

【解决方案2】：

解决该问题的简单解决方案是将“标志”的颜色覆盖为透明。只需覆盖“.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;
}

【讨论】：

【解决方案3】：

这也可以通过应用以下样式来完成，

<style>
  .k-dirty{
    display: none;      
  }
</style>

【讨论】：