Simplifying Grails Flexigrid Integration

Would you like to incorporate the great Flexigrid component like the following picture into your Grails application?

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

<r:require module="flexigrid"/>

2. Render the flexigrid in the person/list.gsp using <g:flexigrid> tag, for example:

<g:flexigrid for="com.vobject.addressbook.Person" properties="title, firstName, lastName, dateOfBirth, remark" />  

3. Enabled the Flexigrid support for the PersonController by adding the following configuration to the Config.groovy file:

grails.plugins.dynamicController.mixins = [
 'com.vobject.flexigrid.FlexigridControllerMixin':'com.vobject.addressbook.PersonController'
]

Done! You will see the person list render as Flexigrid component in the picture above after you run "grails run-app".  The <g:flexigrid> tag will render the first column as link and all columns with equal width by default.

Let's do some customization, I want to enabled link for the First Name column instead of Title column and custom width for each column like the following picture:

It is as simple as specify the linkProperty and columnWidth attribute, please see the following code:

<g:flexigrid for="com.vobject.addressbook.Person" properties="title, firstName, lastName, dateOfBirth, remark" linkProperty="firstName" columnWidth="30, 150, 100, 70, 300"/>

Behind The Scene

The codes above was implemented by a Grails plugin known as "flexigrid" by refer to the blog post "Using Flexigrid in Grails Web Applications " to further simplifying Grails Flexigrid integration. It was depends on dynamic-controller plugin. Many thanks to kindness of Ronillo Ang for the writing and Burt for the creation of dynamic controller plugin.