Hello!
I am trying to make a tree with DHTMLX Suite 8.3.9. I created a tree, attached it to a layout and I am trying to load data into it through a php file in which i generate JSON content.
When my JSON doesn’t include icon attributes on any nodes, my tree is successfully loaded. However, if I try to set a different item to an item, my tree does not load.
This is my js code:
const tree_view = new dhx.Tree("tree_view", {
css:"custom-tree"
});
tree_view.data.load("server/tree_menu.php");
layout.getCell("tree_menu").attach(tree_view);
and this is the tree structure with a font awesome icon:
[
{
"value": "NAME",
"id": "4^NAME",
"items": [
{
"value": "Dashboard",
"id": "4^NAME",
"icon": {
file: "fas fa-database",
openFolder: "fal fa-database",
folder: "fal fa-database"
}
}
]
}
]
If i take the icon off it works fine, but with the icon it doesn’t work.
I should also mention that it works if I put my JSON into a variable and load it into the tree like this:
const dataset3 = [same JSON];
const tree_view = new dhx.Tree("tree_view", {
data: dataset3,
css:"custom-tree"
});
layout.getCell("tree_menu").attach(tree_view);
Am I missing something?
Thanks in advance!
Please note that in case of attaching a dhx component to any dhx container (layout, tabbar, window, popup) you should define any container for the component in its constructor and leave it as null:
const tree_view = new dhx.Tree(null, {
If the problem still occurs for you please provide a complete demo or a demo link, where the problem can be reconstructed locally.
Hello! Thank you for the reply.
I have two other questions.
- How do I use autoload leaving the constructior as null?
I changed the tree constructor to null the way you instructed.
const tree = new dhx.Tree(null, { // null instead of tree
isFolder: obj => obj.items,
autoload: "https://docs.dhtmlx.com/suite/backend/autoload",
css: "custom-2"
});
and then I load and attach to the layout, but it does not work:
tree.data.load("https://docs.dhtmlx.com/suite/backend/autoload/?id=tree");
autolink.layout.getCell("tree").attach(tree);
like in this snippet: DHTMLX Snippet Tool
- My other question is that I’d like to know how should I make my JSON to use autoload. In the snippet, when i click on https://docs.dhtmlx.com/suite/backend/autoload, I get an empty JSON, like this:
// 20240416114518
// https://docs.dhtmlx.com/suite/backend/autoload
[
]
and then by clicking on https://docs.dhtmlx.com/suite/backend/autoload/?id=tree, it loads Books and Magazines:
// 20240416114555
// https://docs.dhtmlx.com/suite/backend/autoload/?id=tree
[
{
"value": "Books",
"parent": "tree",
"id": "Books",
"opened": false,
"items": true
},
{
"value": "Magazines",
"id": "Magazines",
"parent": "tree",
"opened": false,
"items": true
}
]
I’m using php to make my JSON, so should i have multiple php files building different JSON structures to load my tree? For example, an empty file for the autoload property, a php file for node Books and a php file to node magazines?
I’m sorry for any confusion and thank you in advance for the help.
Thank you for your report. The problem was confirmed. We’ll try to fix it in one of the future updates.
I’ll inform you about any progress on this issue.
Initially you populate a data with the root level items only and load it to your tree, where the “items:true” - indicate that the item has the nested items that should be loaded from your backend.
At the moment you expand such item tree sends the request to your backend with the id of the expanding item in the parameters of the url, so you know on your side which data is required and populate it.
How do I use autoload leaving the constructior as null?
I changed the tree constructor to null the way you instructed.
For now as a workaround you may try to define the root id for your tree data. Like:
https://snippet.dhtmlx.com/oti99mq0