CODEWITHSUNDEEP
ignite-uiigtree
Vivek Pandita
Vivek Pandita

Reputation: 69

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

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

Upvotes: 0

Views: 608

Answers (2)

Vivek Pandita
Vivek Pandita

Reputation: 69

let nodes = $("#configTree").igTree("children", event.element);
  if(nodes) {
    nodes.forEach((node1)=>{
      $("#configTree").igTree("expand", node1.element);
    })
  }

Upvotes: 1

Todor Paskalev
Todor Paskalev

Reputation: 66

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.

Upvotes: 2

Related Questions