我目前正在构建一个与 Progress 意味着使用他们的 Grid 的一般方式背道而驰的网格，但我希望这是可能的（我目前很难过）。
要求很简单：在所有行的网格客户端模板中显示输入字段。单击命令按钮时 - 确保输入字段有效，然后再继续。
无论我以何种方式尝试以下实例，剑道验证器都不会识别数据源模式的模型字段验证，或者输入字段本身的任何属性。最终我想让pattern/ data-val-regexHTML5/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": ""
}
},
}
}
}
}
});
});
有了这个 Grid，对于某些单元格，它会调用FieldValueEditor获取 Client Template 的方法；
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验证器 from$row在调用时返回 truevalidate
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
}
}