This is a migrated thread and some comments may be shown as answers.
Kendo MVC In-Cell Grid Editing - Custom/Conditional Validation
2 Answers 77 Views
This is a migrated thread and some comments may be shown as answers.
Andrei
Top achievements
Rank 1
Andrei asked on 19 Dec 2019, 06:23 PM

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?

2 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 23 Dec 2019, 08:12 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Andrei
Top achievements
Rank 1
answered on 02 Jan 2020, 04:38 PM
This worked just as required, thanks!
Tags
Grid
Asked by
Andrei
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Andrei
Top achievements
Rank 1
Share this question
or