I have an igTree configured for LoadOnDemand. I've implemented the nodePopulating event to populate each node with children as I expand the node. Everything works fine.
However, I now find that I need to programmatically populate/expand some of the nodes without requiring a user to click to expand it.
In the igTree rendered event I have something like the following. Unfortunately, since each childNode is not populated, they aren't expanding. There is clearly code somewhere to initiate populating a node since a node gets populated when I click on the expand indicator. But I can't find anything documented that tells me how I can do it programmatically.
Is there something like $tree.igTree("populate",childNode); available?
var uncheckedNodes = $tree.igTree("uncheckedNodes");uncheckedNodes.forEach(function (child, i) { var childNode = child.element; if (i < 3) { $tree.igTree("expand",childNode); }});
Hello Ray,
Thank you for your feedback.
I am glad to hear that you have resolved your issue. Also, I would like to thank you for posting it here on our forum, this way others may refer to this thread in case they are facing a similar problem.
Please do let me know if you have any additional questions.
I was performing each expand in the rendered event for the igTree. Once the root node was populated, I might want to go ahead and expand one or more of the child nodes. I am using Load On Demand, but my datasource is populated via an API call.
In the rendered event I was issuing multiple "expand" requests, but only the first request was being honored. I guess because I'm using an API call to populate my nodes, the first node couldn't be populated before the next expand request was issued, so only the first request was honored. I put a longer delay between expand requests and then all of them were honored.
In the end I had to create a FIFO queue. I can issue an expand request, but I have to wait for each one to complete before the next one is issued. So I'm storing all nodes to be expanded in a FIFO stack and only issuing the expand for each node after the previous node has fully populated.
So, in the end, the $tree.igTree("expand",childNode) does work and causes the childNode to be populated just prior to expanding it, however, I must wait for the nodePopulated event to be fired for childNode before I can execute $tree.igTree("expand",childNode2) for a different node, otherwise, childNode2 is never populated or expanded.
Thank you for your reply.
Please find the attached sample where we show how you could trigger load on demand programmatically. We also show how you could append an additional node during the "nodePopulating" event.
Also, you may take a look at this address where we have a live sample running and you may try to experiment with it as well.
If you are still unable to use the “expand” function, to populate your nodes, please do send us a sample where you isolate your scenario. This should provide us with the needed details to move your case further.
In the meantime, we are always open to any other questions that you might have.
igTree.rar
I will give the "expand" another try, however, when I tried that originally the node was not populated.
After having investigated your scenario further, I would like to inform you that you may indeed expand a node programmatically by simply calling the “expand” function of the igTree.
First, you would have to get the node that you would like to expand, this is achieved like so:
const firstNode = $(“#myTree”).igTree(“nodeByIndex”, 0);
Please note that there are multiple ways of getting the node that you need, you may find more info here.
Then expand the node that you just got:
$(“#myTree”).igTree(“expand”, firstNode);
The “expand” function triggers the population of the node as soon as it is called. Invoking it should allow you to populate nodes programmatically.
Please be sure to contact us again should you require additional assistance.