SpreadJS 14
Features / Cells / Cell Types / Combo Box Cell
In This Topic
    Combo Box Cell
    In This Topic

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

    Combo box cell

    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.

    Editable combo box cell

    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