Kendo 网格客户端模板输入验证

Question

我目前正在构建一个网格，它违背了 Progress 意味着使用他们的网格的一般方式，但我希望这是可能的（我目前被难住了）。

要求很简单：在所有行的网格客户端模板中显示输入字段。单击命令按钮时 - 在继续之前确保输入字段有效。

无论我尝试以下实例，kendo 验证器都不会识别数据源模式的模型字段验证，或输入字段本身的任何属性。最终我想让 pattern/data-val-regex HTML5/unobtrusive 验证工作。

如有任何帮助，我们将不胜感激。

我的网格编码为；

$(function() {
    var Data = [];
    jQuery("#grdData").kendoGrid({
        "dataBound": grdData_Bound,
        "editable": "inline",
        "columns": [{
            "title": "Id",
            "field": "Id",
            "template": "#=FieldValueEditor(data, \"HiddenField\", \"Id\", \"\")#",
            "hidden": true
        }, {
            "title": "Name",
            "field": "Name",
            "template": "#=FieldValueEditor(data, \"TextField\", \"Name\", \".+\")#"
        }, {
            "title": "Description",
            "field": "Description"
        }, {
            "title": "Requirements",
            "field": "Requirements"
        }, {
            "title": "Icon",
            "field": "Icon"
        }, {
            "title": "Type",
            "field": "Type"
        }, {
            "title": "ActionText",
            "field": "ActionText"
        }, {
            "title": "ActionWarning",
            "field": "ActionWarning"
        }, {
            "title": "Timeout",
            "field": "Timeout"
        }, {
            "title": "Retention",
            "field": "Retention"
        }, {
            "title": "Active",
            "field": "Active"
        }, {
            "title": "New Requirements",
            "field": "NewRequirements",
            "template": "#=FieldValueEditor(data, \"TextField\", \"NewRequirements\", \".+\")#"
        }, {
            "title": "",
            "field": "Commands",
            "command": [{
                "text": "Save Requirements",
                "name": "SaveRequirements",
                "click": grdData_Command
            }, {
                "text": "Save Name",
                "name": "SaveName",
                "click": grdData_Command
            }, ]
        }, ],
        "dataSource": {
            "type": (function() {
                if (kendo.data.transports['aspnetmvc-ajax']) {
                    return 'aspnetmvc-ajax';
                } else {
                    throw new Error('The kendo.aspnetmvc.min.js script is not included.');
                }
            }
            )(),
            "transport": {
                "read": {
                    "url": "/Action/View/1/62/Data",
                    "data": AntiForgeryToken
                }
            },
            "pageSize": 4,
            "schema": {
                "data": "Data",
                "total": "Total",
                "errors": "Errors",
                "model": {
                    "id": "Name",
                    "fields": {
                        "Id": {
                            "type": "string",
                            "validation": {
                                "required": true,
                                "pattern": ""
                            }
                        },
                        "Name": {
                            "type": "string",
                            "validation": {
                                "required": true,
                                "pattern": ".+"
                            }
                        },
                        "Description": {
                            "type": "string",
                            "validation": {
                                "required": true,
                                "pattern": ""
                            }
                        },
                        "Requirements": {
                            "type": "string",
                            "validation": {
                                "required": true,
                                "pattern": ""
                            }
                        },
                        "Icon": {
                            "type": "string",
                            "validation": {
                                "required": true,
                                "pattern": ""
                            }
                        },
                        "Type": {
                            "type": "string",
                            "validation": {
                                "required": true,
                                "pattern": ""
                            }
                        },
                        "ActionText": {
                            "type": "string",
                            "validation": {
                                "required": true,
                                "pattern": ""
                            }
                        },
                        "ActionWarning": {
                            "type": "string",
                            "validation": {
                                "required": true,
                                "pattern": ""
                            }
                        },
                        "Timeout": {
                            "type": "object",
                            "validation": {
                                "required": true,
                                "pattern": ""
                            }
                        },
                        "Retention": {
                            "type": "number",
                            "validation": {
                                "required": true,
                                "pattern": ""
                            }
                        },
                        "Active": {
                            "type": "boolean",
                            "validation": {
                                "required": true,
                                "pattern": ""
                            }
                        },
                        "NewRequirements": {
                            "type": "string",
                            "validation": {
                                "required": true,
                                "pattern": ".+"
                            }
                        },
                        "Commands": {
                            "type": "object",
                            "validation": {
                                "required": true,
                                "pattern": ""
                            }
                        },
                    }
                }
            }
        }
    });
});

有了这个网格，对于某些单元格，它调用 FieldValueEditor 方法来获取客户端模板；

function FieldValueEditor(data, fieldType, columnName, validationExpression) {
    var wrapper = {
        ColumnName: columnName,
        ValidationExpression: validationExpression,
        Data: data
    };
    var raw = $(`#${fieldType}-editor`).html();
    var proxy = kendo.template(raw);
    var html = proxy(wrapper);
    return html;
}

这又会根据字段类型呈现以下脚本模板之一；

<script type="text/html" id="HiddenField-editor">
    <input type="hidden" class="hidden-field" data-bind="value:#:ColumnName#" />
</script>
<script type="text/html" id="TextField-editor">                
    <input type="text" class="text-field" data-bind="value:#:ColumnName#" />
</script>
<script type="text/html" id="DateField-editor">
    <input type="date" class="date-field" data-bind="value:#:ColumnName#" />
</script>
<script type="text/html" id="CheckField-editor">            
    <input type="checkbox" class="check-field" data-bind="value:#:ColumnName#"/>
</script>

此外，我确实有一些 dataBound 逻辑，确保数据项绑定到每一行；

 function grdData_Bound(e) {
    jQuery(".text-field").kendoTextBox({});
    jQuery(".date-field").kendoDatePicker({});
    $grid = $("#grdData");
    var grid = $grid.data("kendoGrid");
    $grid.find('tr.k-master-row').each(function() {
        var $row = $(this);
        $row.kendoValidator().data('kendoValidator');
        var model = grid.dataItem($row);
        kendo.bind($row, model);
    });
    $grid.focus();
}

当激活两个命令按钮 Save Name 或 Save Requirements 中的任何一个时，来自 $row returns 的验证器在调用 validate[=24= 时为真]

  function grdData_Command(e) {
                var $row = $(e.currentTarget).closest('.k-master-row');
                var validator = $row.data('kendoValidator');
                if (validator.validate()) {
                    //always goes in here, no matter how I setup the validation
               } else {
                   //never goes in here
              }
 }

Answer 1

我犯了一个愚蠢的错误。简而言之，我不知道如果字段为空，pattern 属性不会被 kendoValidator.validate 方法触发。使用空字段时，您必须使用 required；这最终是有道理的，并为您提供了使用可选但严格的正则表达式的选项。

修复方法是像这样将 required/pattern 模式参数传递给客户端模板 -

<script type="text/html" id="TextField-editor">
    <input type="text" class="text-field" data-bind="value:#:ColumnName#" #if(Required){# required#}##if(Pattern){# pattern="#=Pattern#" #}# validationMessage="Please enter a valid value" />
</script>

..它很管用！

Kendo 网格客户端模板输入验证

Kendo Grid Client Template input validation

jquery

telerik-grid

kendo-ui

kendo-grid

kendo-validator