Skip to main content

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

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