Grails, jQuery & the jQuery Grid - Part Five - Cell Editing


Staff member
Due to the number of requests, please finally find the extension to the tutorial series showing how to implement cell editing.

This will be the shortest of all the tutorials as all the hard work has been done, to configure cell editing is really a no brainer from this point forward. The only important thing to note is that you CANNOT use both cell editing AND row editing via the popup dialog at the same time. I will show you why in due course.

So lets begin where tutorial number 4 left off, and clarify what we mean by cell editing.

We want to give the user the ability to click on a particular cell and edit the data immediately without any further steps, except for either saving the change or canceling.

All we need to do at this point is add 3 more properties to the grid definition, 'cellEdit', 'cellSubmit' and 'cellurl'.

cellEdit is a true/false boolean property that informs the grid we are using cell editing or not.
cellSubmit is string property that allows for 'local' or 'remote' indicating whether our changes should be stored locally or submitted remotely.
cellurl is a string property that informs the grid where to submit our changes to when cellSubmit is 'remote'

Modify your grid definition so it also contains the following, add these lines directly under gridview: true, making sure you add a comma after gridview:true :

cellsubmit: 'remote',
So we are enabling the feature, specifying changes should be submitted remotely and also using the same URL as we have been using for our existing add/edit routines which mean we don't have to do ANYTHING new to the grails controller.

Before we disable the ROW editing, run the project now to check cell editing works as intended. When you click a cell you should see the text entry cursor appear in the cell, e.g.

View attachment 19

Once you are editing a cell contents, press Esc to cancel, or Either Tab, Enter/Return to save. Tab will of course save before moving to the next field.

Note the rules we previously specified for editing are also still in effect, so enter X in the age field for example and you will see a popup integer warning dialog.

Now back to why we have to disable ROW editing. As you have seen when you are editing a cell, the HTML for that cell changes from simply displaying a value of the field to a HTML input control, whether its a text input or a <select> for drop down lists, the underlying cell HTML has changed.

What this means is if we click a cell to select a row then click one of our 'edit' buttons to display the edit dialog, the HTML from the cell is also display in the dialog, so rather than just seeing the relevant value, we will see HTML! E.g.

View attachment 18

So to prevent this behaviour, look at the navGrid() options and change the edit:true to edit:false

Enjoy cell editing!