Data Loading

There are several simple ways of loading data into dhtmlxTreeGrid:

  • adding data via a configuration property
  • load data from an external file
  • load data from a local data source

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

Preparing data set

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

var dataset = [
        "id": 0,
        "a": 1,
        "b": "Linwood Long long long",
        "c": "Petersen",
        "d": "Dahlgreen Place"
        "id": 1,
        "parent": 0,
        "a": 2,
        "b": "Edenburg",
        "c": "Agnes",
        "d": "Gem Street"
    // more columns

Each object in the data set contains configuration of a grid row. The structure of a row is rather flexible. It may include:

Adding data on TreeGrid initialization

You can specify data you want to add into TreeGrid on the initialization stage. Make use of the data configuration property, as in:

var treegrid = new dhx.TreeGrid("treegrid_container", {
    columns: [// columns config],
    data: dataset

Related sample:  TreeGrid. Basic initialization

External data loading

To load data from an external file, make use of the load method of Tree Collection. It takes the URL of the file with data as a parameter:

var treegrid = new dhx.TreeGrid("treegrid_container", {"../common/dataset.json");

Related sample:  TreeGrid. External data loading

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 Tree Collection. Pass a predefined data set as a parameter of this method:

var treegrid = new dhx.TreeGrid("treegrid_container", {;

Saving and restoring state

To save the current state of a treegrid, use the serialize method of Tree Collection. It converts the data of a treegrid into an array of JSON objects. Each JSON object contains the configuration of a separate row.

var state =;

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

// creating a new treegrid
var treegrid2 = new dhx.TreeGrid(document.body);
// parsing the state of treegrid1 into treegrid2;
Back to top