Combo control

Last Update: 9/26/2016

See Use combo for basic usage and advanced samples.

Create a combo

TypeScript

  import Controls = require("VSS/Controls");
  import Combos = require("VSS/Controls/Combos");

  // Create the combo in a container element
  var combo = Controls.create<Combos.Combo, Combos.IComboOptions>(Combos.Combo, container, options);

JavaScript

  require(["VSS/Controls", "VSS/Controls/Combos"], function(Controls, Combos) {
      // Create the combo in a container element
      var combo = Controls.create(Combos.Combo, container, options);
  });

Options

     {
        id: {string},
        type: {string},
        mode: {string},
        value: {string},
        label: {string},
        source: {any[]},
        enabled: {boolean},
        allowEdit: {boolean},
        cssClass: {string},
        iconCss: {string},
        inputCss: {string},
        invalidCss: {string},
        disabledCss: {string},
        dropButtonHoverCss: {string},
        disableTextSelectOnFocus: {boolean},
        change: {(): any},
        indexChanged: {(index: number): void}
    }
Option Type Default Notes
id string Id added to the underlying input for accessibility.
type string list Type of the combo. It can be 'list', 'date-time', 'multi-value', 'tree' or 'treeSearch'.
mode string Mode of the combo. It can be 'text' or 'drop'. Used by the combo of 'list' type. Determines whether to show drop icon or not.
value string Sets the initial value for the combo.
label string Allows screen readers to read combo value. Should be used along with id.
source any[] Data source of the combo.
enabled boolean Determines whether the combo is enabled or not.
allowEdit boolean Specifies whether the combo can be edited or not. The difference from enabled is items in the dropdown can be selected.
cssClass string Extra css class applied to combo.
iconCss string Css class for drop icon.
inputCss string Css class for the input.
invalidCss string Css class applied for invalid state.
disabledCss string Css class applied for disabled state.
dropButtonHoverCss string Css class applied to drop button when hovered.
disableTextSelectOnFocus boolean Set to 'true' to disable selecting all text in the combobox when it gets focus from another app
change (): any Called when the text of the combo changes.
indexChanged (index: number): void Called when selected item changes. Argument is the index of the selected item.

Methods

getText()

Gets the current text value of the combo.

Returns

string

setText()

Sets the text of the combo.

Returns

void

Parameters

  • text: string. New value to set.
  • fireEvent: boolean. Optional. Determines whether to fire change event or not (default false).

getValue<TValue>()

Gets the underlying value of the combo. If the type is 'list', value is string. If the type is 'date-time', value is Date. If the type is 'multi-value', value is string[].

Returns

TValue

toggleDropDown()

Programmatically toggles the dropdown.

Returns

void

setSource()

Sets a new source for the combo.

Returns

void

Parameters

  • source: any[] or Function. New source for the combo.

getEnabled()

Gets the enabled state of the combo.

Returns

boolean

setEnabled()

Sets the enabled state of the combo.

Returns

void

Parameters

  • value: boolean. True for enabled, false for disabled.

getMode()

Gets the mode of the combo.

Returns

string

setMode()

Sets the mode of the combo.

Returns

void

Parameters

  • value: string. 'drop' or 'text'.

setType()

Sets the type of the combo.

Returns

void

Parameters

  • type: string.

getComboType()

Gets the type of the combo.

Returns

string

setInvalid()

Sets the invalid state of the combo.

Returns

void

Parameters

  • value: boolean. True for invalid, false for valid.