javascript - 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="#">rubentebogt</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');.

question from:https://stackoverflow.com/questions/11018242/how-do-i-open-all-nodes-in-jquery-jstree

Answer 1

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