Configuration

Height of list of options and its cells

There are two useful options to adjust the height of the list of options and the height of a separate cell of this list: listHeight and cellHeight:

var combo = new dhx.Combobox("combo_container",{
    listHeight:220,
    cellHeight:50
});

Label

You can set a label for ComboBox, adjust its width and position using the following properties: label, labelWidth and labelInline. This is how it can be done:

var combo = new dhx.Combobox("combo_container",{
    label:"Some label",
    labelInline: true,
    labelWidth: 100
});

Placeholder

To add some placeholder into the ComboBox input, apply the placeholder property:

var combobox = new dhx.Combobox("combo_container",{
    placeholder: "Some placeholder"
});

Readonly mode

If needed, you can make ComboBox readonly via the readonly property, so that it will be impossible to enter text in the input. In this case a user will only be able to select options from the popup list.

var combo = new dhx.Combobox("combo_container",{
    readonly:true
});

Disabled mode

There is an option that allows making ComboBox disabled and blocks any operations with it. Use the disabled configuration property to enter the described mode.

var combo = new dhx.Combobox("combo_container",{
    disabled: true
});

Template for ComboBox options

You can specify the appearance of ComboBox options in the list with the help of the template property. It is a function that takes as a parameter an item of data collection and should return a string with a template for rendering options in the list.

var combo = new dhx.Combobox("combo_container", {
    template: function (item) {
      return "<div style='display:inline-block'>"
      +"<img style='width:20px;height:20px;margin-right:10px;' src="+item.src+"></div>" 
      + item.value + "</div>";
    }
});

Selection of multiple options

In order to add the possibility to select several options in ComboBox at once, make use of the multiselection configuration option.

var combo = new dhx.Combobox("combo_container", {
    multiselection:true
});

Selection of all options in the list

There is the Select All button that allows selecting all options in the ComboBox list. To add this button into the component, use the selectAllButton property. Note that you also need to enable selection of multiple options by setting the multiselection configuration option to true:

var combo = new dhx.Combobox("combo_container", {
    // enables multiple selection of options
    multiselection:true,
    // shows the Select All button
    selectAllButton: true
});

Number of selected options

Instead of showing all selected options separately in the ComboBox input, you can group them and display just the number of selected options. For this, you should use the showItemsCount property.

There are two possible types of values for this config. You can either simply enable the default behavior of the option, or specify a custom template function to display grouped options in the desired way. The function takes one parameter:

  • count - (number) the number of selected options

and should return a template for displaying a result.

var combo = new dhx.Combobox("combo_container", {
    multiselection: true,
    // simply enables the option
    showItemsCount: true
});
 
// or
 
var combo = new dhx.Combobox("combo_container", {
    multiselection: true,
    // set a custom template function for showing total number of selected options
    showItemsCount: function (num) {
        return num + (num === 1 ? " item" : " items") + " selected";
    }
});

Don't forget to enable the multiselection option to select several options at once.

Dynamic rendering of options

When you load a list of options into ComboBox, all items are loaded at once. In case you have a large data collection, it is suitable to render data by portions. dhtmlxComboBox provides you with such an ability. Use the virtual property to render options in the ComboBox list dynamically on scrolling the list.

var combo = new dhx.Combobox("combo_container",{
    virtual:true
});

Marking ComboBox as required Form input

When you put ComboBox in a form, you may need to mark it as a required field. It can be easily done using the required configuration property. For the option to work properly, you should use it together with the label property that adds a label for ComboBox.

var combo = new dhx.Combobox("combo_container",{
    label:"My Combo",
    required:true
});

Hidden label

While sending a form to the server you can add a label for a ComboBox input that won't be visible, but will be used to identify the input on the server side. Use the hiddenLabel configuration property for this property.

var combo = new dhx.Combobox("combo_container",{
    label:"My Combo",
    hiddenLabel:true
});

Help icon

While using Combo in a form, it is useful to add some info about options that can be selected in it. Use the help configuration option for this purpose. Set the necessary tip for users as a value of the property.

var combobox = new dhx.Combobox("combobox",{
    help:"Some text"
});
Back to top