View Full Version : ComboBox within Grid - 2 issues

24 Feb 2012, 11:00 AM
I have example attached, seem comments for the issues

Issue 1 :

If you use a combo box in the grid, and you do not want the user to be able to type the value (just select from the list), then you cannot tab through it. I would expect to be able to table to the cell, use the arrows to select, hit enter, and then tab to the next cell. However, with the non-text-field edit mode, I cannot do this.

Issue 2 :

I don't think this is unique to the ComboBox in the grid, just in general.

If I use keyboard navigation to select a row in the combo box, the onChange event doesn't get called.

I have included my createGrid() code here, but the entire source is attached.

private Grid<Item> createGrid(ItemProperties properties) {
ColumnModel<Item> model = createColumnModel(properties);

Grid<Item> myGrid = new Grid<Item>(datastore, model);

final GridInlineEditing<Item> editor = new GridInlineEditing<Item>(myGrid);

final TextField field = new TextField();

final SimpleComboBox<String> comboBox = new SimpleComboBox<String>(new LabelProvider<String>() {
public String getLabel(String item) {
return (item != null) ? item : "";

comboBox.add(Arrays.asList("red", "yellow", "blue", "green", "black", "orange", "purple"));

// *********************************************************************************************************
// ISSUE 1 : TAB navigation doesn't work if the combo box is not editable (you have to pick from the list).
// If you comment this out, then tab navigation works
// *********************************************************************************************************


comboBox.addChangeHandler(new ChangeHandler() {
public void onChange(ChangeEvent event) {

// ******************************************************************************************************
// ISSUE 2 : If I use keyboard navigation and enter, this doesn't get called until after the blur event,
// or until the combox box is explaned.
// ******************************************************************************************************
System.out.println("onChange " + ((ComboBox<?>) event.getSource()).getCurrentValue());

if ("purple".equals(comboBox.getCurrentValue())) {
// If I add this, the row is re-rendered, and the description becomes hidden, but the color doesn't change.
// That is because the value used from the color column is still black, since the datastore hasn't been updated yet.
datastore.fireEvent(new StoreUpdateEvent<Item>(Arrays.asList(currentRow)));
} else {
// If I add this, the row is re-rendered, and the description becomes hidden, but the color doesn't change.
// That is because the value used from the color column is still black, since the datastore hasn't been updated yet.
datastore.fireEvent(new StoreUpdateEvent<Item>(Arrays.asList(currentRow)));

ColumnConfig<Item, String> col1 = (ColumnConfig<Item, String>) model.findColumnConfig("name");
ColumnConfig<Item, String> col2 = (ColumnConfig<Item, String>) model.findColumnConfig("color");

editor.addEditor(col1, field);
editor.addEditor(col2, comboBox);

editor.addBeforeStartEditHandler(new BeforeStartEditHandler<Item>() {
public void onBeforeStartEdit(BeforeStartEditEvent<Item> event) {
currentRow = datastore.get(event.getEditCell().getRow());
if (event.getEditCell().getCol() == 1) {
Scheduler.get().scheduleEntry(new ScheduledCommand() {
public void execute() {

editor.addCompleteEditHandler(new CompleteEditHandler<Item>() {
public void onCompleteEdit(CompleteEditEvent<Item> event) {
//datastore.fireEvent(new StoreUpdateEvent<Item>(Arrays.asList(currentRow)));
currentRow = null;

return myGrid;


24 Feb 2012, 11:44 AM
Also, if I do enable editable (comment out Issue 1 as I mentioned above), I can select a value with arrow keys and enter key and then tab out of the cell and the onChange event is NEVER called.

This allows the user to bypass validation rules I need to run based on the value of the combo box.

15 Mar 2012, 12:00 PM
Thanks for the report and for the complete sample code.

Issue 1

In quickly playing around with the app, I seem to be able to do exactly what you're requesting. I click a cell in the name column, and that cell shows a text field. I press tab, and a cell in the color column shows a combo box. Pressing down reveals the drop down list, and I'm able to choose the item I want using the up and down arrow keys. Pressing return selects that item, and the entire row turns that colour when I press tab to move to the description column. Is this not the behaviour you're requesting? I'm testing this in Firefox 10 in development mode.

Issue 2

This is the correct behaviour. There has been a lot of discussion on the forums about having an event that would be fired when an item is selected from the list, but before the combo box loses focus. There is now a ticket filed against the team to implement such an event. When that event is added, you should be able to achieve your intended effect by handling that new event. This thread is among many that I will reply to once that event is added.

18 Apr 2012, 4:50 AM

For Issue 1, the described behaviour is broken in 4.1.0 RC 1 and later.
Pressing return with an active combobox in a grid will select the current item and close the combobox, but it is impossible to tab to the next cell. Somehow the focus on the grid gets lost. You have to click in the grid again in order to regain keyboard navigation.

For a test case, see the Cell Editing Grid Example in the default examples package.

Best regards,


18 Apr 2012, 7:36 AM
Is there another way to execute some logic right after user has changed ComboBox value? Ive got ComboBox and Grid on my page and I need to refresh Grid data every time user changes ComboBox value.

I can understand that comboBox.addValueChangeHandler... works only when comboBox losts a focus. Is there any simple way to handle select event for ComboBox?