Skip to main content

Data loading

There are several simple ways of loading data into DHTMLX TreeGrid:

  • on initialization of TreeGrid
  • after initialization of TreeGrid

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

Preparing data set​

DHTMLX TreeGrid expects loaded data in the JSON format.

info

Please note that if you specify the id fields in the tree collection, their values should be unique. You can also omit the id fields in the tree collection. In this case they will be generated automatically.

Here is an example of an appropriate data set:

const 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:

rowId(string | number) optional, the id of a row. In case you haven't specified ids of rows, they will be auto-generated
parent(string | number) the ID of the parent row
columnContent(string | number) content of a column as key:value pairs, where key is the id of a column and value is any content you want to add into the column

Loading data on TreeGrid initialization​

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

const treegrid = new dhx.TreeGrid("treegrid_container", {
    columns: [
        // columns config
    ],
    data: dataset
});

Related sample: TreeGrid. Initialization with config.data

Loading data after initialization​

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

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:

const treegrid = new dhx.TreeGrid("treegrid_container", {
    columns: [
        // columns config
    ]
});
treegrid.data.parse(dataset);

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

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:

const treegrid = new dhx.TreeGrid("treegrid_container", {
    columns: [
        // columns config
    ]
});
treegrid.data.load("../common/dataset.json");

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

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:

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

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.

const state = treegrid1.data.serialize();

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

// creating a new treegrid
const treegrid2 = new dhx.TreeGrid("treegrid_container2");
// parsing the state of treegrid1 into treegrid2
treegrid2.data.parse(state);