Grid pop up editor with custom validator not working

[Alan]

Hi there,

I've got a razor page called: ManageNotification.cshtml, inside there's one kendo grid with pop up editor:

@(Html.Kendo().Grid<Ozone.Domain.Notification>()
            .Name("gridNotification").Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("AddEditNotification")

 

In the Script section of this same page, i've got this code to initiate kendoValidator:

$(document).ready(function () {       
        $("form#NotificationForm").kendoValidator({
            rules: {
                datecompare: function (input) {
                    if (input.is("[data-datecompare-msg]") && input.val() != "") {
                        var startDatetime = $("#dtStart").data("kendoDateTimePicker").value();
                        var endDatetime = $("#dtEnd").data("kendoDateTimePicker").value();
                        
                        var startDatetime = kendo.parseDate(startDatetime);

                        var result = endDatetime >= startDatetime;

                        return !result;
                    }
                }
            }
        });      
    });

 

The AddEditNotification.cshtml is located in EditorTemplates folder, and it's like this:

 <form method="post" action="" role="form" name="NotificationForm" id="NotificationForm">
        <div class="form1">
            <label>Name:</label>
            @Html.TextBoxFor(o => o.Name, new { @class = "control1", @title = "Name is not used" })
        </div>
        <br />
.....

</form>

 My problem is: this line in Script is never hit:
if (input.is("[data-datecompare-msg]") && input.val() != "") {

 

When I did kendoValidator in a normal form (that is, not in a pop up editor template), everything works fine and the above line will be triggered every time any control in the form is changed. But doesn't seem to work this way here, not even when I click the Update button.

Everything else about the pop up editor is fine.

 

Anyone has any luck making this work? I've been goolging around for more than 2 hrs now without luck. 
I'm on a commercial license and hoping this can be resolved quickly.
Any working example will be much appreciated.

[Vladimir Iliev]

Hi Alan,

Please check the example below of how to correctly add custom validation rules for the MVC wrapper of the Grid (the demo is self-explanatory):

//the code should be placed before Grid initialization code
(function ($, kendo) {
    //Extending the build in validator
    $.extend(true, kendo.ui.validator, {
        rules: {
            // custom rules
            custom: function (input, params) {
                //check if current input is the needed one as the
                //custom rules are executed against all editors in the edit form
                if (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 to signify validation error
                        return false;
                    }
                }
                //return true to signify validation success
                return true;
            }
        },
        messages: {
            //custom rules messages
            custom: function (input) {
                // return the message text
                return "Date out of range!";
            }
        }
    });
})(jQuery, kendo);

Regards,
Vladimir Iliev
Telerik

[Alan]

Thanks Vladimir, it's all working now.

When I think back again it makes sense: 
The normal initializing code works when there's no validator.
In the case of a pop up editor there's already an existing kendoValidator, hence we need to extend it.