Kendo MVC In-Cell Grid Editing - Custom/Conditional Validation

[Andrei]

We have a grid which is configured for batch in-cell editing. There is a conditional rule where if the user selects certain types of 'Code' in one column, then another column becomes required. We have implemented this with the following code in the onEdit event of the grid:

if (e.model.code == "A" || e.model.code == "B" || e.model.code == "C" || e.model.code == "D") {
            $("#column_LongNameId").attr("required", true);

}

The issue is the name of the column, "column_LongNameId" is long and user-unfriendly and as such, the 'required' pop-up which appears when the user clicks Save Changes, has the message appears "column_LongNameId is required".

We would like to set a custom validation message somehow, such that it simple says "'Name' is required", but cannot find a way via the grid APi or kendo validator to set this message. The conditional-logic nature of the rule plus the fact that we require In-Cell grid editing also makes this difficult to implement via validation rules.

How can we modify/change this validation message?

[Alex Hajigeorgieva]

Hi, Andrei,

The Kendo UI Grid for MVC initializes its validator as soon as the grid is put into edit mode and runs its rules on cell close. 

To achieve the custom validation, regardless of the edit modes, we have one and the same approach - extend the Kendo UI Validator with the custom rule, much like you are doing in the edit event. We have a runnable demo with sample code that you can use at:

https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation

The custom required rule in your case would look something like this. Here is a runnable example for your reference:

https://dojo.telerik.com/@bubblemaster/oWIwAMUP/2

<script type="text/javascript">
    //register custom validation rules
    (function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: { // custom rules
                customrequired: function (input, params) {
                    if (input.is("#column_LongNameId") && !input.val()) {
                        input.attr("data-customrequired-msg", "Name is required");
                        var grid = input.closest(".k-grid").data("kendoGrid");
                        var dataItem = grid.dataItem($(".k-grid-edit-row"));
                        return dataItem.code === "A" || dataItem.code === "B";
                    }
                    return true;
                }
            },
            messages: { //custom rules messages
                customrequired: function (input) {
                    // return the message text
                    return input.attr("data-val-customrequired");
                }
            }
        });
    })(jQuery, kendo);
</script>

Give this a try and let us know in case you need further assistance.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Hiba]

What if I wanted to disable validation for an input textbox? I have a nullable field which user can modify in a grid cell but if user leaves it blank, the client-side validation pops up with "field is required" message. Can I disable this behavior? My MVC grid is in "incell" edit mode. I would like to turn off validation for my column. How can I achieve this?

[Eyup]

Hi Hiba,

You can achieve this requirement directly from the Model CS class by removing the [Required] data annotation. Here is an example:

        [Required]
        public DateTime? OrderDate
        {
            get;
            set;
        }
        // non-required field
        public DateTime? ShippedDate
        {
            get;
            set;
        }

Alternatively, you can use some javascript workaround, but these are a bit tricky and we recommend the Model CS approach:
https://www.telerik.com/forums/disable-automatic-validation#2525635

[Andrei]

This worked just as required, thanks!