Is there any way to add data later?

[nutmix]

All the examples except the Ajax one need the tree data structure to be defined prior to creating the tree object.
We cant use the ajax option as the data returned from the ajax APi needs transformation into the right json format.
We use fetch to get the required data, then format it into the right data structure in the promise, then we need to get the tree to "take" this data at runtime, and display it.

is there any mechanism to dynamically add or change the data structure?

[ericprud]

@nutmix , did you work this out? anything to share?

[nutmix]

We could not find a way to add data dynamically, e.g. to allow data to be pulled in as nodes are opened.

Instead, we recreate the entire tree each time any data changes (its horrible but works). We can only assume this component, although great, is only designed to support showing static data.

`/**
Takes data nodes and shows them as a tree. This implementation uses the infiiite-tree library.
data nodes are in this format:
"id": "unique_ID",
"text": "node-0",
"attributes": {},
"children": [],
"checked": true
"icon" : "jstree-file"
**/
render(data) {

if (this.tree) {
    this.tree.loadData(data);
} else {
    this.tree = new InfiniteTree({
        el: document.querySelector('#tree'),
        data: data,
        autoOpen: true, // Defaults to false
        shouldSelectNode: function (node) { // Determine if the node is selectable
            if (!node || (node === self.tree.getSelectedNode())) {
                return false; // Prevent from deselecting the current node
            }
            return true;
        }
    });
}  // if tree existed

// hide all but top sports nodes.
const rootNode = this.tree.getNodeById('1');
if (rootNode) {
    rootNode
    let kids = this.tree.getChildNodes(rootNode);
    // close each kid node
    kids.forEach(kid => {
        this.tree.closeNode(kid);
    });
} else {
    console.log("rootNode not found");
}

// when a node is selected, copy its ID to the paste buffer

this.tree.on('selectNode', this.selectNodeCallback);

// remove the conttent in the "tree" div

document.getElementById("loading").innerHTML="";

} // renderData()

// filter what tree shows based on inputTextFilter
searchKeyword = (keyword) => {
keyword = keyword || '';
if (!keyword) {
this.tree.unfilter();
return;
}

this.tree.filter(keyword, {
    caseSensitive: false,
    exactMatch: false,
    filterKey: 'name',
    includeAncestors: true,
    includeDescendants: true
});

};`