Loading data into tree with icons

Suite and Optimus Suite 8
#1

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!

#2

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.

#3

Hello! Thank you for the reply.

I have two other questions.

  1. 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

  1. 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.