Dojo Data Grid – Part 22: Using a Date Picker in an Editable Column

Plain text, checkbox, and drop-down list are the options built into the dojo data grid control for editable column field types. In this post, I’ll show how you can use a date picker to edit a column in Notes 9.

Grid - Edit Date Widget 1

Dojo Data Grid Series

Dojo Grids in XPages — All Blog Posts


There are two steps required to make this work.

1) Add the dojox.grid.cells.dijit module to the XPage. (Resources > Add > Dojo Module…)

Grid - Edit Date Widget 2

2) Set a date column’s editable property to true and enter dojox.grid.cells.DateTextBox in the column’s cellType property. (You’ll have to type it in directly — it’s not an option in the list.)

Grid - Edit Date Widget 3

That’s it!

Only Works in Notes 9

This feature was only mentioned in the Dojo DataGrid documentation as of version 1.7. Notes 8.5.3 uses dojo 1.6, so it doesn’t work properly there. It will display the date picker and even display the updated date value in the cell after it’s edited, but it fails when saving the updates.

Formatting the Date Column

Of course, you’re generally not going to leave your dates in this format, because they’re tough to read. In the documentation there is information about column-formatting functions for date fields.

These functions seem to initially work fine for the columns in R9 (it requires overriding he date text box’s default function to return a value, which can be done onclientload). However, when the column value is edited and a new date is selected, it’s no longer in the original format, so it doesn’t get re-formatted properly and the column appears to be blank (and an error about retrieving a date object is thrown quietly). The good news is that the value is still saved properly, so it’s still working in that case.

I tried to tweak the code to trap for that date error and just return the value as is in that case, but I haven’t had success with it yet.

The formatting functions supplied in the documentation work perfectly fine for a straight Dojo DataGrid implementation (i.e. not using the Dojo Data Grid control). The grid control just can’t implement them in the same way because there’s neither a getValue property to attach to a column nor a property to attach dojo attributes.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: