CODEWITHSUNDEEP
javascriptjquerytreeviewjstree
RailsSon
RailsSon

Reputation: 20637

jsTree Open a branch

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

Upvotes: 22

Views: 66500

Answers (8)

Miro Margalitadze
Miro Margalitadze

Reputation: 279

just use this if you use json 

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

Upvotes: 3

dzona
dzona

Reputation: 3751

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

Upvotes: 2

dvpweb
dvpweb

Reputation: 1

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

Upvotes: 0

Arvind
Arvind

Reputation: 671

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

Upvotes: 10

Jeremy K
Jeremy K

Reputation: 81

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

Upvotes: 5

Manfred Wuits
Manfred Wuits

Reputation: 175

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

Upvotes: 3

Bob
Bob

Reputation: 3084

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

Upvotes: 9

KiriLL Ivanov
KiriLL Ivanov

Reputation: 209

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

Upvotes: 20

Related Questions