Skip to main content

Data Loading

There are several ways of loading Combo options:

  • from an external file
  • from a local data source

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

Preparing data set#

dhtmlxCombo expects loaded data in the JSON format. Here is an example of an appropriate data set:

var 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. You can specify your own template of rendering Combo options with the help of the template configuration option.


Note that value is a mandatory property for a dataset item and src is a reserved one.

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:

var combo = new dhx.Combo("combo_container");"../common/dataset.json");

Related sample: Combobox. Basic Initialization

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:"/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:

var combo = new dhx.Combo("combo_container");;

Related sample: Combobox. Basic Initialization

Saving and restoring state#

To save the current state of a combo box, 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.

var state =;

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

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