Question

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

我的网格字段验证存在问题。

当我点击＆＃34;添加新记录＆＃34;时，会在数据网格中添加一个新的空行。

不填写任何值，然后点击＆＃34;保存更改＆＃34;按钮，即使没有填充所需的值，也会处理创建操作。

例如名称：

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

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

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

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

Answer 1

我最近也碰到了这个问题，它给了我很多头脑，但有两种选择。

使用内联编辑
强制验证新单元格

出于多种原因，我没有使用选项1，包括现在需要在每行进行编辑，更新和取消按钮才能进行任何验证。

选项2

来自Telerik论坛的Brian Roth的想法，见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是否为null。这是我需要的主要变化，因为我的单元格不可编辑。
运行新行和更新行的验证。请注意，IsNew（）是一个函数，而IsUpdated是一个布尔值。
使用类k-hierarchy-cell跳过单元格。这仅在分层网格中需要（这是我使用它的原因）。

剑道数据网格＆＃34;添加新记录＆＃34;忽略验证规则

2 个答案: