Data Loading

There are several simple ways of loading data into dhtmlxTree:

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 Tree.

Preparing data set

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

var dataset = [
    {
        "value": "Books",
        "id": "books",
        "opened": true,
        "items": [          
            {
                "value": "History",
                "id": "history",
                "items": [{
                    "value": "John Mack Faragher",
                    "id": "jmf",
                    "icon": {
                        "folder": "fas fa-book",
                        "openFolder": "fas fa-book-open",
                        "file": "fas fa-file"
                    }
                },
                {
                    "value": "Jim Dwyer",
                    "id": "jd"
                },
                {
                    "value": "Larry Schweikart",
                    "id": "ls"
                }]
            },
            {
                "value": "Fiction & Fantasy",
                "id": "fantasy",
                "items": [{
                    "value": "Audrey Niffenegger",
                    "id": "af"
                },
                {
                    "value": "Philip Roth",
                    "id": "pr"
                }]
            },
            {
                "value": "Teens",
                "id": "teens",
                "items": [{
                    "value": "Joss Whedon",
                    "id": "jw"
                },
                {
                    "value": "Meg Cabot",
                    "id": "mc"
                },
                {
                    "value": "Garth Nix",
                    "id": "gn"
                }]
            }
        ]
    }
];

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) 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
items	(array) an array of nested items
icon	(object) allows adding custom icons for a tree item

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

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

var tree = new dhx.Tree("tree_container");
tree.data.parse(dataset);

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.

var 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
var tree2 = new dhx.Tree(document.body);
// parsing the state of tree1 into tree2
tree2.data.parse(state);