Skip to main content

Work with ComboBox

Setting/getting value(s)#

In order to select options in ComboBox, use the setValue() method. It takes one parameter:

  • ids - (string|number|array) the ids of items from data collection that should be selected in ComboBox
// select one optioncombo.setValue(combo.data.getId(1)); // selects several options at oncecombo.setValue([combo.data.getId(1), combo.data.getId(3)]);

Related sample: Combobox. Set Value

To get the list of selected options, apply the getValue() method. It returns ids of selected options either as string(s) (by default) or as an array of strings. In the latter case you need to pass the following parameter:

  • asArray - (boolean) true, to return ids as an array of strings
var id = combo.getValue();// -> "u1556098582074" // returns ids of selected options as stringsvar ids = combo.getValue();// -> "u1556097609214,u1556097609228,u1556097609244" // returns ids of selected options as an array of stringsvar array_ids = combo.getValue(true);// -> ["u1556097609214", "u1556097609228", "u1556097609244"]

Related sample: Combobox. Get Value

Disabling/enabling ComboBox#

To disable/enable ComboBox, make use of the disable()/enable() methods:

// disabling a combo boxcombo.disable();// enabling a combo boxcombo.enable();

Related sample: Combobox. Enable And Disable

Checking if a combobox is disabled#

To check if a combobox is disabled, call the isDisabled() method:

combo.isDisabled(); // -> true/false

Related sample: Combobox. Enable And Disable

Repainting ComboBox#

You can repaint ComboBox on a page, e.g. after changing its configuration, using the paint() method:

// disabling ComboBox via the configuration objectcombo.config.disabled = true;// repaints ComboBox with a new configcombo.paint();

Clearing input#

It is possible to clear the ComboBox input from the selected value(s) with the help of the clear() method:

combo.clear();

Related sample: Combobox. Clear

Setting focus#

When needed, you can set focus in the ComboBox input without opening the list of options. Use the focus() method for this purpose:

combo.focus();

Related sample: Combobox. Focus

Hiding/showing the popup#

You can manipulate the visibility of the Combo popup with the help of the Popup API.

To hide/show the popup, use the corresponding methods:

show()shows a popup in a Combo. Takes two parameters:
  • container - (HTMLElement) mandatory, the container to place a popup in
  • config - (object) optional, the configuration object of a popup
hide()hides a popup

// showing a popupcombo.popup.show(container);
// hiding a popupcombo.popup.hide();

Related sample: Combobox. Popup

To control the process of showing/hiding the popup, apply the related events:

beforeShowfires before a popup is shown. The handler function takes one parameter:
  • container - (HTMLElement) a container a popup is placed into
Return false to prevent showing of a popup
afterShowfires after a popup is shown. The handler function takes one parameter:
  • container - (HTMLElement) a container a popup is placed into
beforeHidefires before a popup is hidden. The handler function takes two parameters:
  • fromOuterClick - (boolean) true, for a click outside a popup, otherwise - false
  • e - (Event) the native mouse event
Return false to prevent hiding of a popup
afterHidefires after a popup is hidden. The handler function takes one parameter:
  • e - (Event) the native mouse event

combo.popup.events.on("BeforeShow", function(HTMLElement){    console.log("A popup will be shown");    return true;                });
combo.popup.events.on("AfterShow", function(HTMLElement){    console.log("A popup is shown");                });
combo.popup.events.on("BeforeHide", function(fromOuterClick,e){    console.log("A popup will be hidden");    return true;                });
combo.popup.events.on("AfterHide", function(e){    console.log("A popup is hidden");           });

Related sample: Combobox. Popup Events

Using Data Collection API#

You can manipulate ComboBox options with the help of the Data Collection API.

Adding options into ComboBox#

It is possible to add more options into the initialized ComboBox on the fly. Use the add() method of Data Collection. It takes two parameters:

config(object) the configuration object of the added option
index(number) optional, the position to add an option at

For instance:

combo.data.add({value:"Russia"},1);

Related sample: Combobox. Add/Remove

Updating ComboBox options#

You can change config options of the option via the update() method of Data Collection. It takes two parameters:

idthe id of the option
configan object with new configuration of the option

For example, you can change the image of an option:

combo.data.update("option_id",{    value:"Russia", src: "../common/flags/ru.png"});

Related sample: Combobox. Update

Removing options from ComboBox#

To remove an option, make use of the remove() method of Data Collection. Pass the id of the option that should be removed to the method:

combo.data.remove("option_id");
note

Check the full list of Data collection API