Data loading

There are several ways of loading Combo options:

• on initialization of ComboBox
• after initialization of ComboBox

First, you need to prepare a data set that will be loaded into Combo.

Preparing data set

DHTMLX Combo expects loaded data in the JSON format.

info

Please note that if you specify the id fields in the data collection, their values should be unique. You can also omit the id fields in the data collection. In this case they will be generated automatically.

Here is an example of an appropriate data set:

const dataset = [
    {
        value: "Austria",
        src: "../common/flags/at.png"
    },
    {
        value: "Belgium",
        src: "../common/flags/be.png"
    },
    {
        value: "Bulgaria",
        src: "../common/flags/bg.png"
    },
    {
        value: "Cyprus",
        src: "../common/flags/cy.png"
    }
]

Each object in the data set contains a number of key:value pairs that represent attributes of Combo options. Check the details.

You can specify your own template of rendering Combo options with the help of the template configuration option.

note

Note, until you use the template option, the value is a mandatory property for a dataset item and src is a reserved one.

Loading data on initialization

You can load a predefined data set into Combobox on the initialization stage. Use the data configuration property, as in:

const combo = new dhx.Combobox("combo_container",{
    data: dataset
});

Related sample: Combobox. Initialization with config.data

Loading data after initialization

There are two ways to load data into Combobox after its initialization:

• from an external file
• from a local data source

External data loading

To load data from an external file, make use of the load() method of DataCollection. It takes the URL of the file with data as a parameter:

const combo = new dhx.Combo("combo_container");
combo.data.load("../common/dataset.json");

Related sample: Combobox. Initialization with data.load()

The component will make an AJAX call and expect the remote URL to provide valid JSON data.

Data loading is asynchronous, so you need to wrap any after-loading code into a promise:

combo.data.load("/some/data").then(function(){
   // some logic here
});

Loading from local source

To load data from a local data source, use the parse() method of DataCollection. Pass a predefined data set as a parameter of this method:

const combo = new dhx.Combo("combo_container");
combo.data.parse(dataset);

Related sample: Combobox. Initialization with data.parse()

Saving and restoring state

To save the current state of a combo box (in other words, the current list of Combobox options), use the serialize() method of DataCollection. It converts the data of a combo box into an array of JSON objects. Each JSON object contains a set of key:value pairs that represent attributes of ComboBox options.

const state = combo1.data.serialize();

// -> [{…}, {…}, {…}, {…}, {…}, {…}, {…}, …]

note

If you just call the serialize() method, it will return the list of all Combobox options.

If you select an option in the Combobox and call the serialize() method, it will return only this option.

If you enable the multi-selection mode of Combobox, then select one or several options in the Combobox and call the serialize() method, it will return the list of all Combobox options.

Then you can parse the data stored in the saved state array to a different combo box. For example:

// creating a new combo
const combo2 = new dhx.Combo(document.body);
// parsing the state of combo1 into combo2
combo2.data.parse(state);