How to get all the children nodes from the selected node in jstree

Question

var selectedNode = $("#evts").jstree("get_selected");

Hi everyone.. I am using the above code to get the selected node from the tree. How to get all the children nodes for the selectedNode ...I am using jstree 3.3...

Thanks in advance!

Answer 1

var currentNode = $("#evts").jstree("get_selected");
   var childrens = $("#evts").jstree("get_children_dom",currentNode);

   for(var i=0;i<childrens.length;i++)
   {
   alert(childrens[i].innerText);
   }

the above code works as expected...

Answer 2

 var selectedNode = $("#evts").jstree("get_selected");
 var node_info=$('#evts').jstree("get_node",selectedNode[0]);

 // this node_info contains **children_d** an array of all child nodes' id .
 // **parents** an array of parent nodes


    alert(node_info.children_d.join(','));
    alert(node_info.parents.join(','));

Answer 3

   // Return childen even if not rendered
  function getAllChildrenNodes(parentNode, children=[]) {
    var node = $("#SimpleJSTree").jstree("get_node",parentNode);
    children.push(node.id);
    if (node.children) {
      for (var i = 0; i < node.children.length; i++) {
        getAllChildrenNodes(node.children[i], children);
      }
    }
    return children;
  }
 var selectingInProccess=0;
  // select all child nodes when parent selected
  $('#SimpleJSTree').on('select_node.jstree', function (e, data) {
    if(selectingInProccess==0){
      selectingInProccess=1;
      var closedNodes=[];
      var children = getAllChildrenNodes(data.node.id);
      children.forEach(function(node){
        var nodeClosed = ($("#SimpleJSTree").jstree("is_closed",node));
        $("#SimpleJSTree").jstree("select_node",node);
        if(nodeClosed){
          closedNodes.push(node);
        }
      });
      closedNodes.forEach(function(node){
        $("#SimpleJSTree").jstree("close_node",node,false);
      });
      selectingInProccess=0;
    }
  });

  // deselect all child nodes when parent deselected
  $('#SimpleJSTree').on('deselect_node.jstree', function (e, data) {
    if(selectingInProccess==0){
      selectingInProccess=1;
      var children = getAllChildrenNodes(data.node.id);
      children.forEach(function(node){
        $("#SimpleJSTree").jstree("deselect_node",node);
      });
      selectingInProccess=0;
    }
  });

Answer 4

For example:

enter $('button').on('click', function () {
var instance = $('#tree').jstree(true);
    selected = instance.get_selected()[0];
console.log(instance.get_node(selected).children);
});

If you want to do that in an event handler - it is even easier:

$('#tree').on('changed.jstree', function (e, data) {
console.log(data.instance.get_node(data.selected[0]).children);
});

Answer 5

You can use get_children_dom (obj) for get childrens try...

var selectedNode = $("#evts").jstree("get_selected");
var childrens = get_children_dom(selectedNode);

Doc: https://www.jstree.com/api/#/?f=get_children_dom(obj)