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 combo
var combo2 = new dhx.Combo(document.body);
// parsing the state of combo1 into combo2;