[Solved] MVC Client Side Validation error with Telerik Grid

[Bill]

Client Side Validation seems to completely stop working when I use a Telerik Grid that uses AJAX Binding. FireFox swallows the jscript errors but in IE8 I get a "Object Required" error. If I skip pass the error, the Grid actually paints and appears to be working but all Client Validation on the page stops working.

Sample code from Partial View

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<WebRole.Models.BargeLog>>" %> 

<% Html.Telerik().Grid(Model)
        .Name("frmBargeLog")
         .DataBinding(dataBinding => dataBinding
 
            .Ajax()
                .Select("EditBargeLog", "BargeLog", new { BargeId = ViewData["BargeId"] })
                .Update("Edit_BargeLog", "BargeLog", new { BargeId = ViewData["BargeId"] }))
 
        .Columns(col =>
        {
            col.Bound(bat => bat.BargeLogId).Title("Barge Log ID");
            col.Bound(bat => bat.BargeActivityDateTime).Title("Date & Time");
            col.Bound(bat => bat.BargeActivityName).Title("Activity");
            col.Command(cmd => cmd.Edit());
        })
        .Pageable()
        .Sortable()
           .DataKeys(keys =>
            {
                keys.Add(c => c.BargeLogId);
            })
        .Render();

The error occurs for in MicrosoftMvcValidation.js on the underlined line of code (5).

     this._errors = [];
    this.fields = new Array(0);
    this._formElement = formElement;
    this._validationSummaryElement = validationSummaryElement;
    formElement[Sys.Mvc.FormContext._formValidationTag] = this;
    if (validationSummaryElement) {
        var ulElements = validationSummaryElement.getElementsByTagName('ul');
        if (ulElements.length > 0) {
            this._validationSummaryULElement = ulElements[0];

Removing this line from MicrosoftMvcValidation.js also suppresses the error but obviously disables client 
side validation.

 //Calling Microsoft validation initialization
    Sys.Mvc.FormContext._Application_Load();

Again, if the Grid is Server bound, everything works fine. I'm sure I could design and lay out my page 
differently to work around this problem but I don't think I really should have to.

[Atanas Korchev]

Hi Bill,

I reproduce the problem locally. By design the validation javascript needs a form tag which the grid does not render in Ajax mode. The fix is to add an empty form tag after your grid:

<form id="frmBargeLogform"></form>

We will fix that in the next official release.

Regards,
Atanas Korchev
the Telerik team

[Bill]

Wow that fixed it. However, now I'm running into an issue with the Edit button on the Grid.

http://www.telerik.com/community/forums/aspnet-mvc/grid/telerik-grid-error-on-click-of-edit-null-or-not-an-object.aspx

[Bill]

Atanas,
Unfortunately, while adding the <form> tag resolves the MicrosoftMvcValidation.js errors, it seems like it actually causes problems with a grid that is editable. See the post regarding anonymous(data) errors http://www.telerik.com/community/forums/aspnet-mvc/grid/telerik-grid-error-on-click-of-edit-null-or-not-an-object.aspx
After further inspection of the client side html, it appears that the <form id=<gridname> + 'form'"> does get generated by the Telerik Grid.

Here's the summary of the behavior:

OPTION A
Code: No addtional <form> tag is added after the AJAX bound, editable Grid (must be a Grid that is in a Partial View)
Results: 
   1. Null Object/anonymous(data) errors go away, 
   2. Get object required JScript errors on MicrosoftMvcValidation.js; Client Side Validation on the entire page stops working

OPTION B
Code: Add an addtional <form> tag after a AJAX bound, editable Grid (must be a Grid that is in a Partial View)

Results:
    1. Null Object/anonymous(data) errors come back.
    2. No MicrosoftMvcValidation.js errors; client side validation works on other partial views but not the Grid

Just to reiterate, this behavior only happens with an Editable, AJAX bound Grid that is in a partial view.

 I have a few partial views on my ASPX page and Client Side Validation is important to have on some of them. I went with OPTION A and I modified MicrosoftMvcValidation.js to tell it not to process the partial view that contain the Telerik Grid.

Sys.Mvc.FormContext._Application_Load = function Sys_Mvc_FormContext$_Application_Load() {
    var allFormOptions = window.mvcClientValidationMetadata;
    if (allFormOptions) {
        while (allFormOptions.length > 0) {
            var thisFormOptions = allFormOptions.pop();
            if (thisFormOptions.FormId != 'frmBargeLog1form') {
                Sys.Mvc.FormContext._parseJsonOptions(thisFormOptions);
            }
        }
    }
}

"frmBargeLog1form" is the form object that is generated by the Telerik Grid. This is a total hack but it seems to be the best solution for now. Luckily the server side validation on the Grid still works.

I spent a little time debugging MicrosoftMvcValidation.js and it appears that 'allFormOptions' is a collection of form objects and their properties. So if you have an ASPX page with 4 partial views (in my case that's equivalent to 4 <form>s). It will iterate through each one and try to run  Sys.Mvc.FormContext._parseJsonOptions on each one.

In my case, 3 of the 4 form objects where "parsed" successfully by Sys.Mvc.FormContext._parseJsonOptions. The one that failed was 'frmBargeLog1form' which is the Telerik Grid's form.

So I compared a successful form object with the Telerik Grid form object and noticed that the Telerik Grid form is missing the ValidationSummaryId property while the the other 3 form objects all have that property.

Hopefully the workaround helps someone and someone else can provide some insight to this.

[Atanas Korchev]

Hello Bill,

 After posting you the fix we discovered that there was an issue with this approach (rendering an empty form). I am sending you a hotfix build which should address this problem. Please try it and let us know if there are still issues in your scenario.

Regards,
Atanas Korchev
the Telerik team

[Preet Virk]

Do we need to replace the files in MVC project with the attached hotfix ?

[Preet Virk]

Atanas ,

I had the same issue as that of Bill. I tried using the hotfix but the issue still persists.

I am trying to use custom Client Side validation rule for the property of model that is bound to Telerik Grid. I need to added "MicrosoftMvcValidation.js" file to Telerik().ScriptRegistrar() DefaultGroup. I register the rule in Sys.Mvc.ValidatorRegistry.validators by using the following code:

Sys.Mvc.ValidatorRegistry.validators.price = function (rule) {
    var minValue = rule.ValidationParameters["min"];

    return function (value, context) {

        if (!value || !value.length) {
            return true;
        }

        if (context.eventName != 'blur') {
            return true;
        }

        if (value > minValue) {
            var cents = value - Math.floor(value);
            if (cents >= 0.99 && cents < 0.995) {
                return true;
            }
        }

        return false;
    };
};


I run into exactly same issue as that specified by Bill above.
I replaced all the file by the files in hotfix attached by you. Can you please tell me if I am missing anything ?

Regards
P Virk

[Atanas Korchev]

Hi Preet Virk,

I couldn't reproduce this with the hotfix build. Could you please open a support ticket and provide some sample code?

Looking forward to your reply,
Atanas Korchev
the Telerik team