网格 "dirty" 标志未更新

Question

我无法手动 setting/removing Kendo 网格控件上的 "dirty flag" 指示器。

我已将教程扩展到 preserve dirty indicators 以包括在 dataSource.change 事件期间对 value 字段的额外验证：

之前保存的 value（其中包含一个 id）已被修改为 0 - 这个是一个有效的 "dirty flag" (e.items[0].id > 0 && e.items[0].value === 0)
输入了一个大于 0 的 value - 这个是一个有效的 "dirty flag" (e.items[0].value > 0)
value的任何其他实例都不是有效的"dirty flag"，因此应该被删除
如果用户离开了 value 字段 "blank" 即 "null"，将值修改为 0 (if (!e.items[0].value) {e.items[0].value = 0;})

应用这些更改后，change 事件现在看起来像：

change: function (e) {
    if (e.action == "itemchange") {                
        if ((e.items[0].id > 0 && e.items[0].value === 0) || e.items[0].value > 0) {
            e.items[0].dirtyFields = e.items[0].dirtyFields || {};
            e.items[0].dirtyFields[e.field] = true;
            _dirty = true;
        }
        else {
            if (!e.items[0].value) {
                e.items[0].value = 0;
            }
            e.items[0].dirty = false;
            e.items[0].dirtyFields = e.items[0].dirtyFields || {};
            e.items[0].dirtyFields[e.field] = false;
        }
        $("#grid").data("kendoGrid").refresh();
    }
}

进行这些更改后，我可以看到触发了 dirtyField 函数（即值列的 template），还可以看到相应的 true/false 值被提供和适当的 return 发生（我认为，应该 set/remove 来自适当单元格的 "dirty flag"）：

function dirtyField(data, fieldName){
    if(data.dirty && data.dirtyFields[fieldName]){
        return "<span class='k-dirty'></span>"
    }
    else{
        return "";
    }
}

但是，在网格中的另一个单元格被修改之前，"dirty flag" 不会被删除。

这里有一个 Dojo example 来演示这个问题。为了复制：

在第二行 value 单元格中输入一个大于 0 的值（设置 "dirty flag"）
从第二行 value 单元格中删除值（"dirty flag" 保留 -> 现在应该根据 change 事件逻辑消失）
在第三行 value 单元格中输入一个大于 0 的值（在当前单元格上设置 "dirty flag"，从第二行 value 单元格中删除 "dirty flag"）

Answer 1

您的 DataSource.change 事件在网格单元格关闭之前被调用。所以你刷新网格和单元格更改没有正确反映在 UI.

您应该将网格刷新移动到网格 cellClose 事件。然后在单元格关闭并且一切正常后将调用网格刷新。

$("#grid").kendoGrid({
    dataSource: dataSource,
    sortable: true,
    pageable: true,
    navigatable: true,
    height: 400,            
    columns: [
        { field: "value", title: "Value", editor: decimal_NumberEditor, format: '{0:n2}', attributes: { class: "editable-cell" }, template: "#=dirtyField(data,'value')# #:value#" }],
    editable: true,
    cellClose: function(e) {
        $("#grid").data("kendoGrid").refresh();
    }
});

这里是使用事件日志记录的工作示例，以便更好地了解正在发生的事情。查看 JS 控制台：

http://dojo.telerik.com/ICIxUX/7

网格 "dirty" 标志未更新

Grid "dirty" flag not updating

javascript

jquery

kendo-ui

kendo-grid

kendo-datasource