Data loading

You can load Combobox options in two ways:

• During Combobox initialization
• After Combobox initialization

Both ways start from a prepared data set.

Preparing data set

DHTMLX Combobox expects data in JSON format.

info

If you specify id fields in the data collection, their values must be unique. You can also omit these fields. In this case Combobox generates the values automatically.

The following data set is valid:

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 key:value pairs that define Combobox option attributes. Check the details.

Use the template configuration option to define your own template for Combobox options.

note

Unless you apply the template option, value is a mandatory property of a data set item, and src is a reserved one.

Loading data on initialization

You can load a predefined data set into Combobox during initialization. Use the data configuration property:

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

Related sample: Combobox. Initialization with config.data

Loading data after initialization

You can load data into Combobox after initialization in two ways:

• From an external file
• From a local data source

External data loading

The load() method of DataCollection loads data from an external file. The method takes the URL of the data file as a parameter:

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

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

The component makes an AJAX call and expects the remote URL to return valid JSON data.

Combobox loads data asynchronously, so place the code that depends on the loaded data into the then() callback:

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

Loading from local source

The parse() method of DataCollection loads data from a local data source. Pass a predefined data set to this method:

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

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

Saving and restoring state

The serialize() method of DataCollection saves the current state of Combobox — the current list of its options. The method converts Combobox data into an array of JSON objects. Each JSON object contains key:value pairs that define Combobox option attributes.

const state = combo.data.serialize();

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

note

The value returned by the serialize() method depends on the Combobox state:

Combobox state	serialize() returns
No option selected	All Combobox options
One option selected	The selected option only
Multi-selection mode enabled, one or several options selected	All Combobox options

You can parse the saved state array into a different Combobox:

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