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.