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

3 posts, 0 answers
  1. Andrei
    Andrei avatar
    11 posts
    Member since:
    Jul 2019

    Posted 19 Dec 2019 Link to this post

    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. Alex Hajigeorgieva
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 23 Dec 2019 Link to this post

    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:

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

    <script type="text/javascript">
        //register custom validation rules
        (function ($, kendo) {
            $.extend(true, kendo.ui.validator, {
                rules: { // custom rules
                    customrequired: function (input, params) {
                        if ("#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);

    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.
  3. Andrei
    Andrei avatar
    11 posts
    Member since:
    Jul 2019

    Posted 02 Jan 2020 in reply to Alex Hajigeorgieva Link to this post

    This worked just as required, thanks!
Back to Top