Work with ComboBox

Setting/getting value(s)

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

• ids - (string|array) the ids of items from data collection that should be selected in ComboBox

// select one option
combo.setValue(combo.data.getId(1));
 
// selects several options at once
combo.setValue([combo.data.getId(1), combo.data.getId(3)]);

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 strings
var ids = combo.getValue();
// -> "u1556097609214,u1556097609228,u1556097609244"
 
// returns ids of selected options as an array of strings
var array_ids = combo.getValue(true);
// -> ["u1556097609214", "u1556097609228", "u1556097609244"]

Disabling/enabling ComboBox

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

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

Repainting ComboBox

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

// disabling ComboBox via the configuration object
combo.config.disabled = true;
// repaints ComboBox with a new config
combo.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();

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();

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 three 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 popup
combo.popup.show(container);
 
// hiding a popup
combo.popup.hide();

Related sample:  Popup - DHTMLX Combobox

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

• beforeShow - fires 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
• afterShow - fires after a popup is shown. The handler function takes one parameter:
  • container - (HTMLElement) a container a popup is placed into
• beforeHide - fires 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
• afterHide - fires 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:  Popup events - DHTMLX Combobox

Setting ComboBox state

While validating data it will be useful to change the state of ComboBox, depending on the result of validation. There is the setState method that allows setting different states for ComboBox. You can apply one of three states: "default", "error" and "success". For example:

combo.setState("success");

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

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

Updating ComboBox options

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

• id - the id of the option
• config - an 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"
});

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");

Back to top