Dojo Data Grid – Part 23: Using a ComboBox in an Editable Column

In the last post, I showed how to use a date picker in an editable column. In this post, I’ll show how you can use a ComboBox in an editable grid column. The date picker required Notes 9 to work, but the ComboBox works in 8.5.3.

Dojo Data Grid Series

Dojo Grids in XPages — All Blog Posts

Implementation

There are three 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.ComboBox in the column’s cellType property. (You’ll have to type it in directly — it’s not an option in the list.)

Grid_23_A

3) Provide options for the ComboBox. These can be computed with SSJS in the options property — the same way it’s done for a Select cell.

The Result

Now, you have a ComboBox, where the user can type as well as select from the list.

Grid_23_B

As the user types, the options in the list are filtered down, so this is a nice step up from the standard Select field.

Grid_23_C

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: