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