How to expand all child nodes of a node when expanding the particular node in igTree?

585 views Asked by At

I am using IGtree. I have data in tree till 4 levels in tree. Initially all nodes are collapsed. On expanding any particular node, all its child nodes should get expanded also till the last level

2

There are 2 answers

0
Vivek Pandita On BEST ANSWER
let nodes = $("#configTree").igTree("children", event.element);
  if(nodes) {
    nodes.forEach((node1)=>{
      $("#configTree").igTree("expand", node1.element);
    })
  }
1
Todor Paskalev On

One of the options is to handle nodeExpanding event to distinguish the root nodes and find their children which are parents. Then expand every node and all the nodes up to the root node. Here as a code snippet:

$(document).on("igtreenodeexpanding", "#tree", function (evt, ui) {
    // this ensures the expanding node is on root level.
    if (ui.node.path.indexOf(ui.owner.options.pathSeparator) <= -1) {
        // Select all the nodes whcih contain children
        // Here you can play with the path if you want to limit expanding to a certain level
        var nodes = $(ui.node.element).find("li[data-role='node'].ui-igtree-parentnode");
        for (var i = 0; i < nodes.length ; i++) {
            var node = $(nodes[i]);
            ui.owner.expand(node);
            ui.owner.expandToNode(node);
            // or you can use: 
            // $("#tree").igTree("expand", node);
            // $("#tree").igTree("expandToNode", node);
        }
    }
});

Hope that helps.