Skip to main content

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. Here is an example of an appropriate data set:

const 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

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:

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