Kendo Grid custom validation behaves not like a standard

3 posts, 1 answers
  1. Joakim Karlsson
    Joakim Karlsson avatar
    2 posts
    Member since:
    Jan 2009

    Posted 13 Mar 2013 Link to this post

    I'm trying to use custom validation and figured out that it works not in the same way as standard one.

    When I use required validation the value is validated and it is impossible to change active cell.
    In case of custom validation it is possible to change current active cell. And the validation message become hidden.

    For me it is important to have custom validation with the same behavior as required.

    I've added example
    I've added required validation for the first field and add 'specialDate' validation. So both validate but the way of validation is different.

    I use HtmlHelper for kendo grid creation, so I need to add validation after initialization.

    Validator as below:
        rules: {
            specialDate: function (input) {
                        input.attr("data-specialDate-msg", "The date should be 2013-01-02");
                        return input.val() == '2013-01-02';
            messages: {specialDate: "The date should be 2013-01-02"}

    Thank you.
  2. Answer
    Vladimir Iliev
    Vladimir Iliev avatar
    2194 posts

    Posted 15 Mar 2013 Link to this post

    Hi Joakim,

    Basically you can add additional validation rules using Data Annotations over the model properties or extend the grid build-in validator with additional rules in the following way:

        //place after the grid code
        (function ($, kendo) {
            //Extending the Grid build in validator
            $.extend(true, kendo.ui.validator, {
                rules: {
                    // custom rules
                    custom: function (input, params) {
                        if ("#LastSupply")) {
                            //If the input is LastSupply
                            var datePicker = $(input).data("kendoDatePicker");
                            var max = datePicker.max();
                            var min = datePicker.min();
                            var currentInputDate = new Date(input.val());
                            if (min > currentInputDate || max < currentInputDate) {
                                return false;
                        //check for the rule attribute
                        return true;
                messages: { //custom rules messages
                    custom: function (input) {
                        // return the message text
                        return "Date out of range!";
        })(jQuery, kendo);

     Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Joakim Karlsson
    Joakim Karlsson avatar
    2 posts
    Member since:
    Jan 2009

    Posted 15 Mar 2013 Link to this post

    Hi Vladimir,

    The extension of the kendo validator gave me the expected result.
    Thank you for replay! It works.

    Could you correct the documentation. Because this confuses.

Back to Top