Friday, August 31, 2012

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!

Like this blog?

Thanks for visiting! If you like what you see, I'd really appreciate you linking to it or otherwise sharing it with people you think would find it useful.


Dado said...

Interesting plugin, really agile! Thanks, I'll try it for sure.

MDM said...

Very interesting, but where the plugin can be found ? It is not listed on the site, neither on your published plugin list

Lim Chee Kin said...

It was not published yet, still under cooking :)

Sundara Kaku @ iCore Innovations said...


I would like to use this plugin, how can i download and install this new plugin

Susana Lozano said...

Very interesting. Hopefully I can download soon. Thank.

sailorkid said...

Good work, any update on release date?


Luis Higuera said...

is very good.

Please you share you sample app?