Kendogrid column validation message and template

Question

I am very much confused what to use for kendogrid column validation and changing error templates?

I want to show different validation messages for different columns. Also would like to change the UI for default error message. I want to just show the error message in red color with no background color.

   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;
  }

I tried this, its not working. I still can see default validation message alert.

I also tried below but it doesnot work

   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
              }
            }
          }
          }

Also tried one more thing

 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);

But this also is not working.

Can someone suggest what is the right way to do this?

CennoxX · Answer 1 · 2019-12-13T11:59:15.010

To change the error message you have to set the message as data-<name of rule>-msg attribute inside the rule:

    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;
                    },
                }
            },
        }
    }

If you want a complete other UI, you could put a span with the class="k-invalid-msg" and data-for="Col1" inside a hidden div. Then you could create inside the validator your own span and add it to your form.

Kendogrid column validation message and template

1 Answers1