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:

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");

Related sample:  Tree. Basic Initialization

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);

Related sample:  Tree. Basic Initialization

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);
Back to top