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 DhxForm Inputs

Related sample:  Form. Combo

Adding Combo

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

var 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" }
            ]
        }
    ]
});

Attributes

You can provide the following attributes in the configuration object of a combo:

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:

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

List of the control methods:

clear clears a value of a Combo control
clearValidate clears validation of a Combo control
disable disables a Combo control on a page
enable enables a disabled Combo control
focus sets focus to a control
getProperties returns an object with the available configuration attributes of the control
getValue returns the current value of a Combo control
getWidget returns the dhtmlxComboBox widget attached to a Combo control
hide hides a Combo control
isDisabled checks whether a Combo control is disabled
isVisible checks whether a Combo control is visible on the page
setProperties allows changing available configuration attributes of the control dynamically
setValue sets the value for a Combo control
show shows a Combo control on the page
validate validates a Combo control

List of the control events:

afterChangeProperties fires after configuration attributes of the control have been changed dynamically
afterHide fires after a control is hidden
afterShow fires after a control is shown
afterValidate fires after the control value is validated
beforeChangeProperties fires before configuration attributes of the control are changed dynamically
beforeHide fires before a control is hidden
beforeShow fires before a control is shown
beforeValidate fires before the control value is validated
change fires on changing the value of a control

Working with the dhtmlxComboBox widget

There is a possibility to use methods of dhtmlxCombobox 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.

var combo = form.getItem("combo").getWidget();  // -> ComboBox
combo.focus(); // sets focus in the input
Back to top