Kendo Grid, MVC, Popup Editing, Validation

[John]

Hi,

I have a simple grid with a custom editor template containing a form. I am using data annotations on the model for validation. However, I am trying to customize the validation (disable tooltips and enable css red border). I can do this by adding styles and hiding the validation fields.

What I cannot do is get the red border to surround date pickers and drop downs. I understand there is a hidden field in there that will hold the value and this is the field that gets validated and that it is the wrapper span that needs to get updated with the css.

I am trying to implement the following:

$("form").kendoValidator({

            errorTemplate: "",  
            validate: function (e) {
                var dropDowns = $(".k-dropdown");

                $.each(dropDowns, function (key, value) {
                    var input = $(value).find("input.k-invalid");  
                    var span = $(this).find("span.k-dropdown-wrap");
               if (input.size() > 0) {
                        $(span).addClass("dropdown-validation-error");
                    } else {
                        $(span).removeClass("dropdown-validation-error");
                    }
                });
            }
       });

I am putting the above code into the document.ready function on the grid page (not the editor template) but the custom validation isn't running on the form in the editor template. Is this form in the editor template reachable at the grid view document.load stage or am I missing something? 

To be honest this behaviour should be available out of the box and I've lost alot of time on it. 

Any suggestions would be appreciated.

Regards

[John]

So, for anyone who is interested, I managed to get this working in the following way:

Understandinging that the editor template is pretty much wrapped up in a javascript function, no element can be accessed (so I cannot assign an OnUpdate function to the"Update" button in the editor template.

Ihooked into thegrid's "Update" event by doing

.Update(update=>update.Action("CreateAction","ControllerName").Data("SetupValidation")

Then I used the following script:

  function SetupValidation() {
       var updateButton = $(".k-grid-update");
       updateButton.kendoButton({
           click: onClickUpdateForm
       });
    }
 
    function onClickUpdateForm(e) {
        var validator = $("#myForm").kendoValidator({
            errorTemplate: "",  
            validate: function (e) {
                var dropDowns = $(".k-dropdown");

                $.each(dropDowns, function (key, value) {
                    var input = $(value).find("input.k-invalid");    
                    var span = $(this).find("span.k-dropdown-wrap"); 
                    if (input.size() > 0) { 
                        $(span).addClass("dropdown-validation-error");
                    } else {
                        $(span).removeClass("dropdown-validation-error");
                    }
                });
            }
        }).data("kendoValidator"), status = $(".status");

        validator.validate();
        sendAntiForgery();
    }

Hope that helps somebody in the future.