Kendo UI网格弹出窗口,DropDownList验证消息没有被清除
问题描述:
我在一个Kendo UI网格弹出窗口中编辑的字段使用了DropDownList,虽然验证工具提示没有出现问题,但它们不会消失一次输入已被更正。Kendo UI网格弹出窗口,DropDownList验证消息没有被清除
我创建像这样的DropDownList:
function serviceDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '" data-for="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
optionLabel: "--- select a service ---",
dataTextField: "name",
dataValueField: "id",
dataSource: window.services, // an array I've already fetched from my DB
});
}
我这个函数应用于该领域service_id
当我定义数据源,如:
columns: [
{ field: "service_id",
title: "Service",
editor: serviceDropDownEditor,
template: "#= getServiceName(service_id) #" // display the name from the id
},
要确保有一个放置验证消息,我使用the suggestion on this page并在edit
事件期间在DropDownList下面附加占位符跨度:
edit: function(e) {
var grid = $("#grid").data("kendoGrid")
var container = grid.editable.element
var service_container= container.find("[data-container-for=service_id]")
service_container.append('<span class="k-invalid-msg", data-for="#= field #">')
},
当有引用该字段(service_id
)的服务器端错误,我发现我在edit
事件创建,并与实际的消息取代它,这样的占位符:
var placeholder = container.find("[data-for=" + field + "].k-invalid-msg")
placeholder .replaceWith(validationMessageTmpl({ field: field, message: errors[field] }))
的验证消息模板包含与占位符相同的类和data-for
属性。
它为DropDownList显示错误时效果很好,但当我纠正错误(并在同一表单上引入另一个表单时,所以弹出窗口保持不变)时,原始错误不会消失。
那么...验证工具提示如何清除,以及我需要做什么?在事件中手动清除这一个?
答
尝试在下拉变化如手动清除错误:
function serviceDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '" data-for="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
optionLabel: "--- select a service ---",
dataTextField: "name",
dataValueField: "id",
dataSource: window.services, // an array I've already fetched from my DB
select: function (ev) {
var validatable = container.editable.validatable;
if (validatable) {
var dataItem = this.dataItem(ev.item.index());
if (dataItem === null || dataItem === undefined || dataItem.text == " " || dataItem.text == " ") {
// force validation is empty (simulate required)
validatable.validate();
} else {
// hide all error messages if not empty
validatable.hideMessages();
}
}
}
});
}