Html.JqGrid - Cleaning up your jqGrid Code

I was recently working on a project where I had 5 or 6 different pages, each of which was going to have a full CRUD-enabled jqGrid complete with form editing, date pickers, fields that show up in the form and not on the grid, etc. The problem is after I got finished doing the first one I realized that there was a truckload of really redundant jqGrid code that I didn't want to have to re-type over and over again. Worse, the code is really fragile and if you misplace a comma, bracket, brace, or paren - the debugging of it will give you migraines.

So this is when I decided to write an HTML helper extension, JqGridExtension. This class exposes a single method called JqGrid that you invoke like this from your view page:

<%= Html.JqGrid<ApplicationUser>(
    caption:"Users",
    entityNameCaption:"User",
    gridWidth:700,
    formHeight:500,
    formWidth:600,
    pagerDivName:"pager",
    gridTableName:"userGrid",
    gridDataUrl:Url.Action("GridData", "User"),
    gridEditUrl:Url.Action("SaveUser", "User"),
    gridValidateEditUrl:Url.Action("GridValidateUserEdit", "User"),
    gridValidateDeleteUrl:Url.Action("GridValidateUserDelete", "User"))
%> 

In this code example, you can see that I'm creating a full CRUD grid with form editing (and paging, sorting, and filtering!). The cool part here is that I haven't littered my page with 100+ lines of incredibly difficult to read parameters to the jqGrid plugin. The HTML extension is just a method on a static class that returns a string, like this:

public static class JqGridExtensions
{
public static string JqGrid<T>(this HtmlHelper helper,
    string caption,
    string entityNameCaption,
    int gridWidth,
    int formHeight,
    int formWidth,
    string pagerDivName,
    string gridTableName,
    string gridDataUrl,
    string gridEditUrl,
    string gridValidateEditUrl,
    string gridValidateDeleteUrl) { .... }

The code then just uses these parameters to spit out all of the tedious jqGrid code that I don't want to have to re-write all the time. There's another little piece of trickery here that I found extremely useful - I'm using a custom attribute that I'm decorating my viewmodel properties with. This custom attribute tells my jqgrid extension how it should handle that column - including whether the column is visible in the grid, visible in the form, editable, what the editor type is (text, datepicker, etc).

All I'm really doing is getting the list of public instance properties on typeof(T). For each of those, I grab my custom attribute (JqGridColModelAttribute) and use the properties on that to build the "colModel" and "columns" jqGrid options and then finally I rig up the navigator and all the other stuff. Because the enterprise's use of grids is standardized to always have a certain set of options, I don't need to even prompt the developer for those - I just implement them the same way throughout the organization. If I need to make organization-wide changes to all of my grids, then I can just tweak my HTML helper method.

Creating an HTML helper extension like this takes very little time to do, but saves the developers on your team a TON of time.

tags: jquery  javascript  jqgrid  grid  aspnet  mvc  mvc2  

links: digg this    del.icio.us    technorati    reddit