Data loading

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

• on initialization of Tree
• after initialization of Tree

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

Preparing data set

DHTMLX Tree 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 = [
    {
        "value": "Books",
        "id": "Books",
        "opened": true,
        "items": [
            {
                "value": "Thrillers",
                "id": "Thrillers",
                "opened": true,
                "items": [
                    {
                        "value": "Bestsellers",
                        "id": "Bestsellers",
                        "items": [
                            {
                                "value": "Lawrence Block",
                                "id": "Lawrence Block",
                            }
                        ]
                    },
                    {
                        "value": "Robert Crais",
                        "id": "Robert Crais",
                    },
                    {
                        "value": "Ian Rankin",
                        "id": "Ian Rankin",
                    },
                    {
                        "value": "James Johns",
                        "id": "James Johns",
                        "checked": true,
                    },
                    {
                        "value": "Nancy Atherton",
                        "id": "Nancy Atherton",
                        "checked": true
                    }
                ]
            },            
            {
                "value": "Fiction & Fantasy",
                "id": "Fiction & Fantasy",
                "items": [
                    {
                        "value": "Audrey Niffenegger",
                        "id": "Audrey Niffenegger"
                    },
                    {
                        "value": "Philip Roth",
                        "id": "Philip Roth"
                    }
                ]
            },
        ]
    },
];

const tree = new dhx.Tree("tree", {
    checkbox: true,
});

tree.data.parse(dataset);

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

value	(string) the name of an item
id	(string | number) the id of an item
opened	(boolean) optional, defines whether an item is opened by default
checkbox	(boolean) optional, enables/disables displaying a checkbox for a tree item
checked	(boolean) optional, checks/unchecks a checkbox of a tree item, works when the checkbox property is set to true
items	(array) an array of nested items
icon	(object) allows adding custom icons for a tree item

Loading data on initialization

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

const tree = new dhx.Tree("tree_container", {
    data: dataset
});

Related sample: Tree. Initialization with config.data

Loading data after initialization

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

• from a local data source
• from an external file

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 tree = new dhx.Tree("tree_container");
tree.data.parse(dataset);

Related sample: Tree. 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 tree = new dhx.Tree("tree_container");
tree.data.load("../common/dataset.json");

Related sample: Tree. 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:

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

Saving and restoring state

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

const state = tree1.data.serialize();

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

// creating a new Tree
const tree2 = new dhx.Tree("tree_container2");
// parsing the state of tree1 into tree2
tree2.data.parse(state);