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，则可以将span和class="k-invalid-msg"放在隐藏的data-for="Col1"中。然后，您可以在验证器中创建自己的跨度并将其添加到表单中。