jsTree Open a branch

Question

I am using the JQuery plugin jsTree, http://www.jstree.com/ I am able to expand the whole tree with the following method:

$("#tree").jstree("open_all");

and also a specific node:

$("#tree").jstree("open_node", $('#childNode'));

I am having difficulty opening a branch of the tree, open branch opens it fine but does not open its parent if it has one.

Has anyone successully done this with jsTree? Let me know if you need more info.

Thanks

Eef

Answer 1

You could use the binding

$("#tree").bind("open_node.jstree", function (event, data) { 
  if((data.inst._get_parent(data.rslt.obj)).length) { 
    data.inst._get_parent(data.rslt.obj).open_node(this, false); 
  } 
}); 

Answer 2

just use this if you use json

$("#treeId").on
('loaded.jstree', function() {
 $("#treeId").jstree("open_node", $("#nodeId"));
 });

Answer 3

i found Ted's code working, but had to change it a bit:

 $('#jsTree').bind("open_node.jstree", function (event, data) { 
      if((data.inst._get_parent(data.rslt.obj)).length) { 
        data.inst.open_node(data.inst._get_parent(data.rslt.obj), false,true); 
      } 
    });

Answer 4

Your code for open branch is correct.

For example. Source of tree:

    <div id="treeTask">
       <ul>
          <li id="node_37"><a href="#">TEST1</a>
              <ul>
                  <li id="node_38"><a href="#">TEST2</a></li>
                  <li id="node_39"><a href="#">TEST3</a></li>
              </ul>
          </li>
      </ul>
   </div>

Open node:

$("#treeTask").jstree("open_node", $("#node_38"));

Answer 5

Try this code to open node till nth Level

$("#myTree").jstree({options}).bind('loaded.jstree', function (e, data) {
    /** 
     * Open nodes on load (until x'th level) 
     */
    var depth = 3;
    data.inst.get_container().find('li').each(function (i) {
        if (data.inst.get_path($(this)).length <= depth) {
            data.inst.open_node($(this));
        }
    });
});

Answer 6

None of previous worked for me, so I have created this code, and it works like a charm :)

$('#tree').on('open_node.jstree', function (event, data) { 
    if(data.node.parent !== "#") { 
        data.instance.open_node(data.node.parent); 
    } 
});