add drag and drop functionality to GRAILS-UI datatable editors

In my application I have added a GRAILS-UI datatable with in-line cell editing functionality at the bottom of my page. Problem was that the date picker element, which is a big fat, didn't fit onto the page and was unusable though. I asked the mailing list for help about that and Matthew Taylor adviced me to try and manipulate the position via CSS. That did not work for me as I figured out that the position was hard-coded in the style property of the div tag.


When I googled for a solution I found a post where it is explained how drag and drop functionality can be added to a YUI calendar widget. I adapted the solution here. Unfortunately I found no better way as to manipulate GRAILS-UI's source code. I edited DataTableTagLib.groovy around line 215 like this:

case 'date':
 editorConstruction += """
  var ${editorName} = 
  new YAHOO.widget.DateCellEditor();\n
  ${editorName}.subscribe('showEvent', function()
  {var dd = new YAHOO.util.DD(
  ${editorName}.getContainerEl());});\n"""
break;

With this, the date picker has become draggable and can be of use for my users again.

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
         }