How do I open all nodes in jquery Jstree?

Question

I am using the following code:

$("#treeview").jstree();
$("#treeview").jstree('open_all');

With the following html:

<div id="treeview">
  <ul>
    <li>
      <a href="#">RTB</a>
      <ul>
        <li>
          <a href="#" onclick="goTo('index.php?module=alarm&amp;pagina=dashboard&amp;id=6',false);">Beneden</a>
        </li>
        <li>
          <a href="#" onclick="goTo('index.php?module=alarm&amp;pagina=dashboard&amp;id=7',false);">Boven</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

My problem is that all nodes stay closed, I can't get them to open with jstree('open_all');.

**Comment by [@Mr.sinoser](http://stackoverflow.com/users/2845905/mr-sinoser)** `Note: when you use jQuery .on() method you should check your add jQuery core!! because this method is ready on jQuery 1.7 and upper and While the .bind() method existing in jQuery 1.0` (Copied from answers, answer flagged for deletion) — Pred, Oct 03 '14 at 12:13
In my case, it simply worked with the statement `$("#treeview").jstree('open_all');` as indicated in this [link](https://stackoverflow.com/questions/18498683/javascript-jstree-open-nodes?noredirect=1&lq=1) — Sergio Rodríguez González, Oct 11 '21 at 16:40

score 64 · Accepted Answer · answered Jun 13 '12 at 16:02

64

The jsTree documentation is "sub optimal". The docs don't clearly state that the initialization works asynchronously. There's core.loaded():

A dummy function, whose purpose is only to trigger the loaded event. This event is triggered once after the tree's root nodes are loaded, but before any nodes set in initially_open are opened.

This suggests an event loaded.jstree is fired after the tree is setup. You can hook into that event to open all your nodes:

var $treeview = $("#treeview");
$treeview
  .jstree(options)
  .on('loaded.jstree', function() {
    $treeview.jstree('open_all');
  });

answered Jun 13 '12 at 16:02

rodneyrehm

13,442
1
40
56

1

I was having the opposite problem after using this code. I ended up adding another call to jstree('open_all') after the "on" call because chrome finished the tree before the event registration – Arturo Molina Dec 09 '13 at 19:04
Does this answer still work? I can't seem to get it to work for my tree, although it seems pretty straight forward. – Smoore Mar 24 '14 at 20:54
10

Note atmelino's answer below, on version 3 "ready.jstree" instead of "loaded.jstree" will accomplish the task. – JonK Feb 18 '15 at 22:21
2

This did not work for me - check answer below for "ready.jstree" action. – xil3 Oct 14 '16 at 12:47

score 35 · Answer 2 · answered May 19 '14 at 06:21

35

I am using version 3 of jstree and Chrome. The loaded event did not work for me, but the ready event did, even after the jstree instance was created:

$('#treeview').on('ready.jstree', function() {
    $("#treeview").jstree("open_all");          
});

http://www.jstree.com/api/#/?q=.jstree%20Event&f=ready.jstree

answered May 19 '14 at 06:21

atmelino

2,887
2
20
15

1

This worked for me, whereas the accepted answer did not. – xil3 Oct 14 '16 at 12:46

score 21 · Answer 3 · edited Dec 30 '17 at 10:43

21

If you want open all node when tree loaded:

$("#treeview")
    // call `.jstree` with the options object
    .jstree({
        "plugins" : ["themes", "html_data","ui","crrm","sort"]
    }) 
    .bind("loaded.jstree", function (event, data) {
        // you get two params - event & data - check the core docs for a detailed description
        $(this).jstree("open_all");
    })      
});

edited Dec 30 '17 at 10:43

parth patel

131
7

answered Sep 23 '12 at 16:22

arash

211
2
3

4

For the original poster's sake, it helps to give a bit more of an explanation why this would work - i.e. in this case explaining that `.jstree()` runs asynchronously and fires an event when it's ready. – Stu Cox Sep 23 '12 at 22:17
2

Thanks for the code, it works fine for me, btw, you have an extra }) in the code. – Ricardo Huertas Feb 03 '14 at 16:41

score 10 · Answer 4 · edited May 23 '17 at 12:10

10

all the answers above not work in my workspace. I searched again and find this link(Why doesn't jsTree open_all() work for me?) is helpful, and post my answer:

jstree version: 3.0.0-bata10

$(document).ready(function() {
  $("#tree").bind("loaded.jstree", function(event, data) { 
    data.instance.open_all();
  });
  $("#tree").jstree();
})

edited May 23 '17 at 12:10

Community

1
1

answered Mar 28 '14 at 07:33

albert yu

165
1
5

simply bind ready.jstree as atmelino mentioned and problem solved – mikus Jun 22 '16 at 10:29

score 2 · Answer 5 · answered Mar 03 '16 at 06:56

2

When using html data 'you can set the jstree-open class on any <li> element to make it initially extended, so that its children are visible.' - https://www.jstree.com/docs/html/

<li class="jstree-open" id="node_1">My Open Node</li>

answered Mar 03 '16 at 06:56

xilef

2,199
22
16

score 2 · Answer 6 · answered Dec 30 '17 at 08:17

2

I tried all the answers here and they didn't work with jsTree (v3.3.4). What worked is the load_node.jstree event:

    .on( 'load_node.jstree', function () {
      jstree.jstree( "open_all" );
    } )

answered Dec 30 '17 at 08:17

Fahad Alrashed

1,272
2
11
17

score 1 · Answer 7 · answered Jul 07 '14 at 11:43

1

use simple code

$(".jstree").jstree().on('loaded.jstree', function () {
     $(".jstree").jstree('open_all');
})

answered Jul 07 '14 at 11:43

Behnam

6,244
1
39
36

RickL · Answer 8 · 2018-08-06T12:13:08.757

You can also apply animation to the opening and closing like so:

$(document)
    .on("click", "#open-all-folders", function () {
        // param1 set to null to open/close all nodes
        // param2 is the duration in milliseconds
        $("#tree-ref").jstree().open_all(null, 200);
    })
    .on("click", "#close-all-folders", function () {
        $("#tree-ref").jstree().close_all(null, 200);
    });

(or similarly apply to .on('ready.jstree', function() { // code here } );

score -1 · Answer 9 · edited Oct 25 '13 at 09:05

-1

.bind("loaded.jstree", function (event, data) {
        // you get two params - event & data - check the core docs for a detailed description
        $(this).jstree("open_all");
    })

edited Oct 25 '13 at 09:05

BBdev

4,898
2
31
45

answered Oct 25 '13 at 08:46

BHAVIK GHODASARA

1

How do I open all nodes in jquery Jstree?

9 Answers9

Linked