Kendogrid列验证消息和模板

Question

我非常困惑如何使用kendogrid列验证和更改错误模板？

我想为不同的列显示不同的验证消息。还想更改默认错误消息的UI。我只想用红色显示错误消息，没有背景色。

dataBound: (e: any): void => {
this.updateValidations(e);
}
private updateValidations(event: any): boolean {
let kendoValidator = $('#grid').kendoValidator().data('kendoValidator');
let validatorRules = {
rules: {
Col1Rule: (input) => {
if (input.attr('name') === 'Col1') {
return $.trim(input.val()) !== '';
}
},
Col2Rule: (input) => {
if (input.attr('name') === 'Col2Rule') {
return $.trim(input.val()) !== '';
}
}
},
messages: {
Col1Rule: this.col1Message,
Col2Rule: this.col2Message,
},
errorTemplate: '<span>#=message#</span>'
};
kendoValidator.setOptions(validatorRules);
return true;
}

我试过了，没用。我仍然可以看到默认的验证消息警报。

我也试过下面的，但它不起作用

model: {
fields: {
col1: {
type: 'string',
editable: true,
nullable: false,
validation: {
required: true
message: this.col1Message
}
},
col2: {
type: 'string',
editable: true,
validation: {
required: true
message: this.col2Message
}
}
}
}

还尝试了一件事

let input = $('<input/>');
input.attr('name', options.field);
input.attr('data-required-msg', this.col1Message);
input.width(container.width());
input.width(container.width());
input.appendTo(container);

但这也不起作用。

有人能建议什么是正确的方法吗？

Answer 1

要更改错误消息，必须将消息设置为规则内的data-<name of rule>-msg属性：

model: {
fields: {
col1: {
type: 'string',
editable: true,
nullable: false,
validation: {
Col1Rule: (input) => {
if (input.attr('name') === 'Col1') {
input.attr('data-col1rule-msg', 'your custom message');
return $.trim(input.val()) !== '';
}
return true;
},
}
},
}
}

如果您想要一个完整的其他UI，您可以将一个包含class="k-invalid-msg"和data-for="Col1"的span放在一个隐藏的div中。然后你可以在验证器中创建自己的跨度，并将其添加到表单中