JqGrid & MVC3 - Adding Model Validation

Question

Can I add model validation for editing or adding a jqgrid form? If so, how to do it? I know that I can create a custom check for each field in the jqGrid form, but how do I enable MVC3 integration by default in jqGrid?

I do this by creating a custom button that loads a partial view in the jQuery dialog. However, I would not want to make another call to the controller, given that I can get all my row values ​​directly (even if I lost partial checks of the view model) using jqGrid get Methods.

Any clues?

Answer 1

While I am not familiar with jqGrid, I usually did the same thing as you, touching populating jQuery dialogs from a controller action that displays a partial view.

Instead of making a callback, you can load a partial view when the jqGrid view is displayed. Then just fill in the fields from the selected row. Here is an example of code to consider, untested.

Your grid view:

@model List<Customer> <!-- create jqGrid here --> @Html.PartialView("CustomerForm",new Customer()); 

CustomerForm:

 @model Customer <div id="CustomerForm"> @using (Html.BeginForm("Save","Customer",...) ) { @Html.HiddenFor(m => m.CustomerId) <div class="control-group"> @Html.LabelFor(m => m.CustomerName) <div class="controls"> @Html.EditorFor(m => m.CustomerName) @Html.ValidationFor(m => m.CustomerName) </div> </div> <p><input type="submit" id="submit" value="Save" /></p> } </div> <script type="text/javascript"> var $cf = $('#CustomerForm'); $cf.dialog({ autoOpen: false }); // see jquery ui docs for exact options $('#myGrid .edit, #myGrid .add').click(function() { $(this).closest('tr').find('input, select').each(function() { $('input[name='+this.name+'], select[name='+this.name+']',$cf).val($(this).val()); }); $cf.dialog('open'); }); </script> 

Answer 2

Example:

  $(document).ready(function () { $("#jqg").jqGrid({ url: '@Url.Action("GetData")', datatype: "json", colNames: ['User name', 'Email'], colModel: [ { name: 'UserName', index: 'UserName', width: 150, sortable: true, editable: true }, { name: 'Email', index: 'Email', width: 150, sortable: true, editable: true, editrules:{email:true, required:false}} ], caption: "User List" }); 

Validation is here editrules:{email:true, required:false} (therefore, if this field is empty, Ok, but if it contains an invalid email check, it will fail).

Further information and examples in the jqGrid Wiki

And if you want to perform this check without changing your JS code, you can use controls from Trirand that allow you to do this on the -side server