SpreadJS Documentation
Setting a Combo Box Cell
SpreadJS Documentation > Developer's Guide > Managing the User Interface > Working with Cell Types > 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.

Using Code

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

JavaScript
Copy Code
var cellType2 = new GC.Spread.Sheets.CellTypes.ComboBox();
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 GC.Spread.Sheets.CellTypes.ComboBox().items(items2).editable(true);
activeSheet.getCell(1, 3).cellType(eComboBoxCellType);
activeSheet.setColumnWidth(3,120);
See Also