FAQ - Combo Box Questions

  1. What is ComboBox? Why do I need it?
  2. How to use combo boxes?
  3. Is it possible to create a grid cell that contains a ComboBox?
  4. Does the ComboBox allow choosing an item using a keyboard?
What is ComboBox? Why do I need it?

ComboBox is a GWT widget that has rather similar functionality with standard ListBox. The main differences are:

  • It 's designed to support data models as well as the grids.
  • You can apply any CSS to this widget without browser specific limitations.
  • It doesn't support multiple selections.
  • It does support custom text entering.

Taking into account features and restrictions listed above you can make decision whether you need this component.

[top]
How to use combo boxes?

It's very easy. Consider the sample below. 

//create and fill combo box model

ComboBoxDataModel model = new ComboBoxDataModel();
for (int i =0; i <10; i++)
   model.add(String.valueOf(i),"Option " + i);
ComboBox comboBox =new ComboBox();//create
comboBox.setModel(model);//apply the model
comboBox.display();//display the widget

Note that you should set the combo box data model before you display it. Otherwise it won't work properly. On the other hand you can dynamically set a new instance of the model and invoke the display() method again and again.

[top]
Is it possible to create a grid cell that contains a ComboBox?

Yes, it's possible. Just use the org.gwt.advanced.client.ui.widget.cell.ComboBoxCell when you create a new instance of the grid. Some details about it can also find in this topic.

[top]
Does the ComboBox allow choosing an item using a keyboard?

Yes, keyboard events handling is supported since the 1.4.8 version. The following table contains shortcuts and descriptions for each action you can do with a keyboard.

Shortcut Description
Enter Opens a drop-down list if it's closed, otherwise chooses a currently highlight item in the list
Esc Closes opened drop-down list without choosing an item
Arrow Up Moves the list cursor up
Arrow Down Moves the list cursor down
Tab Moves focus to the next focusable element on the screen
Alt-Tab Moves focus to the previous focusable element on the screen
[top]