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

score 20 · Answer 1 · answered Nov 13 '10 at 07:25

20

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"));

answered Nov 13 '10 at 07:25

KiriLL Ivanov

209
1
2

Worked like a charm ! :D – Damiii Jan 29 '16 at 11:06
This works because you defined nodes in HTML, so they all are loaded and DOM is constructed at the moment you call open_node. This is unfortunately not the case if you use JSON data to build the tree. – C-F Mar 03 '17 at 03:44

score 10 · Answer 2 · edited Apr 15 '15 at 10:43

10

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));
        }
    });
});

edited Apr 15 '15 at 10:43

martincarlin87

10,848
24
98
145

answered Mar 18 '13 at 19:58

Arvind

671
13
46

1

A really nice solution. – himanshupareek66 Dec 03 '13 at 07:29
1

Better late than never! :-D @martincarlin87 – dev_row Apr 16 '15 at 11:33
can you please tell me what to pass in options variable ?? please ?? – Javascript Coder Sep 18 '15 at 09:22
TypeError: data.inst is undefined – Javascript Coder Sep 18 '15 at 09:41
@JavascriptCoder It is now renamed to data.instance – Adrian Mitev Jan 28 '16 at 08:31
How could we implement similar logic in a button click handler (instead of binding to loaded.jstree event) ? Has anyone created a button and been able to have it open jstree to a particular level/depth, without binding it to jstree api events? Im not sure how i get data.inst.get_container() outside of the jstree api event (inside my button click handler) – Peter Noges Jun 01 '19 at 05:37

Bob · Accepted Answer · 2010-11-18T09:11:00.193

9

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); 
  } 
});

edited Nov 18 '10 at 09:11

answered Nov 16 '10 at 14:28

Bob

3,074
11
43
62

3

shouldn't there be some kind of 'unbind' in the end? – Nir O. Apr 10 '12 at 20:21
@NirO. for what reason? – Alexander Suraphel Sep 03 '15 at 07:35

score 4 · Answer 4 · answered Feb 05 '14 at 20:19

Here is function that can open a specific node and all its parents.

function expandNode(nodeID) {
    // Expand all nodes up to the root (the id of the root returns as '#')
    while (nodeID != '#') {
        // Open this node
        $("#jstree").jstree("open_node", nodeID)
        // Get the jstree object for this node
        var thisNode = $("#jstree").jstree("get_node", nodeID);
        // Get the id of the parent of this node
        nodeID = $("#jstree").jstree("get_parent", thisNode);
    }
}

score 3 · Answer 5 · answered Jan 11 '11 at 11:40

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); 
      } 
    });

answered Jan 11 '11 at 11:40

Manfred Wuits

165
1
5

4

I was Ted back in the day :) – Bob Nov 16 '12 at 09:14

score 3 · Answer 6 · edited Jan 18 '18 at 11:27

3

just use this if you use json

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

edited Jan 18 '18 at 11:27

Rabbid76

202,892
27
131
174

answered Jan 18 '18 at 11:22

Miro Margalitadze

249
2
6

score 2 · Answer 7 · answered Mar 22 '17 at 15:51

2

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); 
    } 
});

answered Mar 22 '17 at 15:51

dzona

3,323
3
31
47

score 0 · Answer 8 · answered Jul 17 '16 at 10:23

    // Expand pasted, dragged and dropped node for jstree 3.3.1
        var objtree = $('#jstree');
        objtree.bind('paste.jstree', function(e, d) { objtree.jstree('open_all', '#' + d.parent); });
        $(document).bind('dnd_move.vakata', function(e, d) { objtree.jstree('open_all', $(d.event.target).closest('.jstree-node').attr('id')); });
        $(document).bind('dnd_stop.vakata', function(e, d) { objtree.jstree('open_all', $(d.event.target).closest('.jstree-node').attr('id')); });

Welcome to StackOverflow. Please add more details to your answer and explain why that is the 'correct' way to do it — Zoe, Jul 17 '16 at 10:34

jsTree Open a branch

8 Answers8

Linked