剑道数据网格“添加新记录”忽略验证规则

Question

我有一个带有远程 CRUD 操作的 DataGrid 组件。

我在验证其网格字段时遇到问题。

当我单击“添加新记录”时，会在数据网格中添加一个新的空行。

不填写任何值，点击“Save Changes”按钮，即使没有填写必填值，也会进行创建操作。

例如姓名：

name: {
      editable: true,
      nullable: false,
      validation: {
      required: {
      message: "Please enter a First name"
      }
      }
 },

只有当我单击名称单元格时才会显示验证消息。

有没有办法解决这个问题？

我尝试启用/禁用批量编辑等...但没有运气。

Answer 1

我最近也遇到了这个问题，这让我很头疼，但有两种选择。

1. 使用内联编辑
2. 对新单元格强制验证

我没有选择选项 1 的原因有很多，包括您现在需要每行有一个编辑、更新和取消按钮，然后才能进行任何验证。

选项 2

从 Brian Roth @ the Telerik 论坛得到这个想法，请参阅 here。我使用了他的解决方案，但做了一点优化。

在saveChanges 事件中，实现这个：

saveChanges: function (e) {
    if (!checkCells(this)) {
        e.preventDefault();       //prevents save if validation fails
    }
}

checkForInvalidCells 基本上会遍历每个新行的单元格，打开以进行编辑并尝试关闭（并在此过程中触发验证）。如果验证不成功，则阻止保存。

function checkCells(grid)
{
    var rows = grid.tbody.find("tr");                   //get rows
    for (var i = 0; i < rows.length; i++) {

        var rowModel = grid.dataItem(rows[i]);          //get row data
        if (rowModel && rowModel.isNew()) {

            var colCells = $(rows[i]).find("td");       //get cells
            for (var j = 0; j < colCells.length; j++) {
                if ($(colCells[j]).hasClass('k-group-cell')) 
                    continue;                           //grouping enabled will add extra td columns that aren't actual columns
                grid.editCell($(colCells[j]));          //open for edit
                if (!grid.editable.end()) {             //trigger validation
                    return false;                       //if fail, return false
                }
                else {
                    grid.closeCell();                   //if success, keep checking
                }
            }
        }
    }
    return true;                                        //all cells are valid
}

如果您将我的实现与他的实现进行比较，区别在于：

• 无需使用 break 语句和 bool 标志即可使其更简洁
• 在事件本身中保留保存事件变量 e 逻辑
• 使用isNew() 方法检查新行，新行的 ID/Key 可能并不总是 0，特别是如果它是可编辑字段并且您已经在该字段中输入了信息
• 我考虑启用分组，分组将引入不应检查保存的额外 td 列

总的来说，我讨厌做这样的黑客，但有时这是你必须做的。请注意，如果您一次添加很多新行，则检查将花费更长的时间。

此外，每次检查都会将网格的滚动视图移动到上次检查的单元格（因为您正在以编程方式打开单元格进行编辑）。如果你所有的新行都在网格的顶部可见，这对你来说没问题，但是如果你在底部追加新行，用户可能会觉得奇怪的是网格在保存后滚动了。

Answer 2

这是一个巨大的帮助。非常感谢你，@gitsitgo。

我需要做一些小改动才能让它在我的网格中工作，所以我想我会把它贴在这里。

    var checkCells = (grid: any): boolean => {
        var rows = grid.tbody.find("tr");                   //get rows
        for (var i = 0; i < rows.length; i++) {

            var rowModel = grid.dataItem(rows[i]);          //get row data
            if (rowModel && rowModel.isNew() || rowModel.IsUpdated) {

                var colCells = $(rows[i]).find("td");       //get cells
                for (var j = 0; j < colCells.length; j++) {
                    if ($(colCells[j]).hasClass('k-group-cell'))
                        continue;                           //grouping enabled will add extra td columns that aren't actual columns
                    if ($(colCells[j]).hasClass('k-hierarchy-cell'))
                        continue;                           //hierarchy cell is not actual column             
                    grid.editCell($(colCells[j]));          //open for edit
                    if (grid.editable) {                    //check if editable
                        if (!grid.editable.end()) {         //trigger validation
                            return false;                   //if fail, return false
                        }
                        else {
                            grid.closeCell();               //if success, keep checking
                        }
                    }
                }
            }
        }
        return true;                                        //all cells are valid
    }

区别在于：

• 在调用 grid.editable.end() 之前检查 grid.editable 是否为空。这是我需要的主要更改，因为我有不可编辑的单元格。
• 对新行和更新行运行验证。请注意，IsNew() 是一个函数，而 IsUpdated 是一个布尔值。
• 跳过具有 k-hierarchy-cell 类的单元格。这仅在分层网格中需要（这就是我使用它的目的）。