Skip to main content

Data loading

There are several ways of loading List items:

  • on initialization of List
  • after initialization of List

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

Preparing data set​

DHTMLX List 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": "1st item", "id": "1"},
    {"value": "2nd item", "id": "2"},
    {"value": "3rd item", "id": "3"},
    {"value": "4th item", "id": "4"}
]

Each object in the data set contains a number of key:value pairs that represent attributes of List items. You can specify your own template of rendering List items with the help of the template configuration option.

Loading data on initialization​

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

const list = new dhx.List("list_container", {
    css: "dhx_widget--bordered",
    template: template,
    itemHeight: 72,
    data: dataset
});

Related sample: List. Initialization with config.data

Loading data after initialization​

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

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 list = new dhx.List("list_container", {
    template: template,
    itemHeight: 72
});
list.data.load("../common/dataset.json");

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:

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

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

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 list = new dhx.List("list_container", {
    template: template,
    itemHeight: 72
});
list.data.parse(dataset);

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

Saving and restoring state​

To save the current state of a list, use the serialize() method of DataCollection. It converts the data of a list into an array of JSON objects. Each JSON object contains a set of key:value pairs that represent attributes of List items.

const state = list1.data.serialize();

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

// creating a new list
const list2 = new dhx.List("list_container2");
// parsing the state of list1 into list2
list2.data.parse(state);

Dynamic loading​

Pro version only

This functionality requires PRO version of the DHTMLX suite package.

To enable dynamic data loading in List you need to:

new dhx.LazyDataProxy("https://docs.dhtmlx.com/suite/backend/lazyload", {
    limit: 30,
    prepare: 5,
    delay: 150,
    from: 0
});
  • to enable dynamic rendering of List items, switch the virtual property on:
const list = new dhx.list("list_container", {
    virtual: true
});
  • load data into List via the load method of Data Collection and pass lazyDataProxy as a parameter of this method:
list.data.load(lazyDataProxy);

Related sample: List. External data lazy loading

info

The sort() method of Data Collection will not work until all data are loaded into List. Note that for correct work of lazy loading, you should send all changes in Data Collection to the server at the proper time.