Setting a Combo Box Cell

You can use a combo box cell to display a drop-down list.

You can also make the combo cell editable. You can type in the edit portion of the cell and the matching item in the list is selected automatically.

If the item width is less than the cell width, then the item width is set to the cell width; otherwise, the item width is equal to the width of the longest item.

The maximum number of visible items in the drop-down list is 20. Use the up or down arrow keys to select items when the drop-down list is displayed. The left and right arrow keys commit the selected item and move to the next or previous cell. The Enter key also commits the selected item and the Esc key cancels the selected item.

The arrow keys may not behave the same when using rapid input mode. If the cell's editor status is EditorStatus.Enter, pressing the left or right arrow key ends editing and navigates to the previous or next cell. If the editor status is EditorStatus.Edit, pressing the left or right arrow key does not end editing.

When the allowEditorReservedLocations method is set to false, all cell editors are prohibited from showing custom cursors over parts of the cell and from entering edit mode on a single click over those parts of the cell. Button and combo cells and cells with drop-down buttons will not go into edit mode immediately, and instead the mouse selection will treat those cells as cells without buttons that can be selected.

Using Code

The following example creates a combo box cell with a list of items.

JavaScript	Copy Code
var cellType2 = new GcSpread.Sheets.ComboBoxCellType(); cellType2.items(["a","b","c"]); activeSheet.getCell(2, 2).cellType(cellType2);

The following example creates an editable combo box cell with a list of items.

JavaScript	Copy Code
var items2 = ["a", "ab", "abc", "apple", "boy", "cat", "dog"]; var eComboBoxCellType = new GcSpread.Sheets.ComboBoxCellType().items(items2).editable(true); activeSheet.getCell(1, 3).cellType(eComboBoxCellType); activeSheet.setColumnWidth(3,120);