grails-ui datatable in-line cell editing and dropdowns

Another post about almost the same topic. How to feed the dropdown options for the in-line editing with values from the database. It is quite simple, although I was running in the wrong direction for some time and I was not the first one with this problem.

The simple answer is: you have to add a groovy collection to your model like this (I wanted to be able to choose a user, so I collected user names from the spring security core user class)

def userNames = User.list().collect{it.username}
render(template: '/layouts/template', model: [userNames: userNames])

Now you can do it like this:

..., config:[dropdownOptions: userNames, disableBtns:true]],...

grails-ui datatable in-line cell editing and dates

Today I am playing with the cool in-line cell editing feature of gui:datatable. I wasn't able to get the datePicker working however until I found the solution in a comment on Matthew Taylor's blog.

Apparently, one has to transform the date into a JSON compatible shape. Lucky for us, Matthew has already provided us with such a method:

grailsUITagLibService.dateToJs(myDateObject)

Okay, parsing the String back to a date in the controller was hard work for me. What has been suggested by Matthew in his DemoController produces exceptions. I had to put some own effort into this:

else if(params.field == "date")
         {
          def simpleDateFormat = new java.text.SimpleDateFormat("E MMM dd yyyy HH:mm:ss ZZZZZZZ", Locale.ROOT);

          Date date = simpleDateFormat.parse(params.newValue)
          passage.date = date
         }

in-line editing in scaffolded show.gsp

In the default pages created by the scaffolding mechanism of grails, it is quite cumbersome that whenever you want to change a value of a domain class you have to go to the edit page and afterwards back to the show page. Two complete site loads that do not fit into the web 2.0 paradigm.

Usually one would apply in-line editing to bring in a cool and useful AJAX feature and in fact every JS library seems to have built-in support. It is however quite labourous if you have to add this feature manually to every field even if you make things easier with a tag lib as suggested in the book "Beginning Groovy and Grails" by Christopher M. Judd, Joseph Faisal Nusairat and James Shingler.

I thought about the problem and then decided to try to combine scaffolding with this technique. I used the example from the book as a guideline.

I changed the following entry within show.gsp:

<td valign="top" class="value">\${fieldValue(bean: ${propertyName}, field: "${p.name}")}</td>

to:

<td>
 <g:editInPlace 
  id="${p.name}"       
  url="[action: 'editField', id:${propertyName}.id]"
  rows="1"
  cols="10"
  paramName="${p.name}">\${fieldValue(bean: ${propertyName}, field: "${p.name}")}
 </g:editInPlace>
</td>

One can use the TagLib given by the book, but you have to modify the action in order to work with arbitrary fields. Add the following method to the scaffolded Controller.groovy (/src/templates/scaffolding):

def editField = {
  // Retrieve member
  def ${propertyName} = ${className}.get(params.id)
  if(${propertyName})
      {
      ${propertyName}.properties = params
      ${propertyName}.save()
      // Render a new page.
      render params.get(params.editorId)
  }
    }