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

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");combo.data.load("../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:

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:

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

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 = combo1.data.serialize();

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 combo2combo2.data.parse(state);