Skip to main content

Combo

An input that represents an advanced select box with a set of options. It is able to provide suggestions while a user is typing text.

Combo control

Related sample: Form. All controls

Related sample: Form. Combo

Adding Combo

You can easily add a Combo control during initialization of a form:

const form = new dhx.Form("form_container", {
rows: [
{
type: "combo",
name: "combo",
label: "count",
labelPosition: "left",
multiselection: true,
selectAllButton: true,
value: [
"id_1",
"id_2"
],
data: [
{ value: "1", id: "id_1" },
{ value: "2", id: "id_2" },
{ value: "3", id: "id_3" },
{ value: "4", id: "id_4" },
{ value: "5", id: "id_5" }
]
}
]
});

Properties

View the full list of configuration properties of the Combo control.

Working with Combo

You can manipulate a Combo control by using methods or events of the object returned by the getItem() method.

For example, you can get the value of the control:

const value = form.getItem("Combo").getValue();

Methods

Check the full list of methods of the Combo control.

Events

Check the full list of events of the Combo control.

Working with the dhtmlxComboBox widget

There is a possibility to use methods of DHTMLX Combobox via the getWidget() method of a Combo control.

For example, you can set focus in the Combo input without opening a popup with options. To do this, you need to get the widget attached to the Combo control and then use the focus() method of this widget.

const combo = form.getItem("combo").getWidget();  // -> ComboBox
combo.focus(); // sets focus in the input

Check the full list of methods of the DHTMLX Combobox component which you can apply via the getWidget() method.