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!

Twitter Bootstrap: Multiple Columns Form Layout Examples

I tried to search Twitter Bootstrap examples for multiple columns form layout. I was surprised that I couldn't found any, so I cook my own and publish my work here. I hope it will save you some times. :)

My work was based on the Twitter Bootstrap's fluid layout example.

First, I try to create the following form layout based on my requirements:

fluid-layout.html

Then, I fill-in the layout columns with form elements/components. Two most common form layouts created for the Person Form: standard form and horizontal form.

fluid-person-form.html (Standard Form)

fluid-person-horizontal-form.html (Horizontal Form)

You can download the source code of the examples above at bootstrap-2.1.0-examples.zip.

I hope my sharing is useful to you.

JQuery Validation UI Plugin 1.3 Released - Client Side Validation without writing JavaScript

I would like to announce the JQuery Validation UI Plugin 1.3 and JQuery Validation Plugin 1.9 released. This feature release increase the flexibility of error message display and tip-based message (qtip) is disabled by default to support non-obtrusive error message display and the use of the plugin in mobile HTML5 application.

If you are new to the JQuery Validation UI Plugin, the plugin brought Javascript Validator, Custom Constraints, Remote Constraints, JQuery Validation plugin and qTip (jQuery tooltip plugin) under the same root and deliver comprehensive client-side validation solution.

What's New:

• Fixed Issue #7: Links in jquery.qtip.css are not correct.
• Added errorContainer, errorLabelContainer, errorElement, errorWrapper(wrapper), highlight, unhighlight, onkeyup and qtip attributes for renderValidationScript tag and configuration items. qtip = false (disabled), onkeyup = true (enabled) by default.
• As qtip disabled by default, created jquery-validation-ui-qtip resource module to include qtip resources.
• Remove install-sampleapp script and sample app codes.
• Two sample applications created for Grails 1.3.9 with Grails standard theme and Grails 2.1.0 with Twitter Bootstrap theme. 

Sample App in Grails 1.3.9

Sample App in Grails 2.1.0

Find Out More:

• Source code: https://github.com/limcheekin/jquery-validation-ui
• Documentation: http://limcheekin.github.com/jquery-validation-ui
• Support: https://github.com/limcheekin/jquery-validation-ui/issues
• Older Issues: http://code.google.com/p/jquery-validation-ui-plugin/issues/list
• Discussion Forum: http://groups.google.com/group/jquery-validation-ui-plugin

My First Grails Presentation Slides

I had been in discussion with a local training provider on possibility of conducting a 3-days Grails training course recently. Unfortunately, the plan didn't materialized as I have other work commitment.

I published the slides here is the partial course content of the introduction section. It is my first presentation slides about Grails.

I'd love to hear your comments about the slides above and the Grails training course!