Search code examples
javascriptjqueryjstree

How do I open all nodes in jquery Jstree?


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


Solution

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