Simplifying JQuery Grid (jqGrid) and Master-Detail Form in Grails

What if you can incorporate the powerful JQuery Grid (jqGrid) component like the following screen into your Grails application in just 3 steps?

First of all, the features and codes to be discussed in this blog post was implemented by a Grails plugin known as "jquery-grid" which using jqGrid 4.4.0 released, it don't have any dependency and relationship with Grails jqGrid plugin.

Let's look at how it can be done:
1. In the person/list.gsp, specified the following code block before the </head> tag to import jqGrid resources:

<r:require module="jquery-grid-en"/>

(en is for English, the plugin support internationalization)
2. Render the JQuery Grid in the person/list.gsp using <g:jqueryGrid> tag, for example:

<g:jqueryGrid for="com.vobject.addressbook.Person" properties="title, firstName, lastName, dateOfBirth, remark" columnWidth="50,150,100,100,350" />

3. Implement the corresponding server-side operation which render data as JSON. In the future, server-side code writing will be eliminated as it will be implemented with the help of dynamic-controller plugin like the Flexigrid example.

Done! You will see the person list render as JQuery Grid component in the picture above after you run "grails run-app".

A great feature of the plugin is embedded-inline-editable grid support which allowed you to use the grid component in detail section of the Master-Detail form, for example the Communication List in the following screen:
The embedded-inline-editable grid support add new row to the grid as well as delete multiple selected rows. The <g:jqueryGrid> tag syntax is similar to the previous one with additional type attribute, please see the sample code below:
<g:jqueryGrid for="com.vobject.addressbook.Communication" properties="type, value" type="embedded-inline-editable" rowNum="5" width="595" />

The jquery-grid plugin implemented the following features:

• Sort by column
• Delete selected rows
• Filter by column(s)
• Advance search
• Select all rows
• embedded-inline-editable grid with "Add Row" and "Delete Row(s)" button and jquery-validation-ui plugin integration.
• Show AJAX dialog and submit AJAX form (eg: Create Person and Edit Person screen)

(You can see the features above in the slides I published to slideshare)

I'd love to hear your comments!