Sunday, July 22, 2012

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 = [
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.

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.

1 comment:

Rahul Lamba said...

Is it possible to add Drop Down list Widget instead of Single line text or Plain text, if yes, then where I need to add it and how? Also how can we submit value in our database or what would be the possible way to design the database architecture using this plugin.