jsTree: How to expand all nodes on first visualization and then save and restore state with 'cookies' plugin

Question

I plan to use jsTree to visualize tree like structures and I would like to achieve the following behavior:

• on first time visualization I want to have all nodes expanded
• any consecutive visualizations will restore to the previous state of the tree structure utilizing the "cookies" plugin

Constraints:

• I use json objects to populate the tree
• I can't use 'initially_open' attribute to list IDs for the first visualization because it will be hard to determine the initial IDs

In other words I want to achieve something similar to a) change the default state of node to 'open' or b) determine if this is the first visualization (probably by examining the 'cookie' plugin attributes if we don't have state persisted) and if so then call 'open_all'

Ideas are appreciated. Thanks!

Answer 1

To expand all nodes, simply use

$("#treeView").jstree("open_all");

You can include it in the initial load, like so

$('#treeView').jstree(
{
    "themes": {
        "theme": "default",
        "dots": false,
        "icons": false
    },
    "plugins": ["themes", "html_data", "checkbox", "ui"]
}).jstree("set_theme", "apple")
.bind("loaded.jstree", function (event, data) {
    $(this).jstree("open_all");
});

Likewise, if you want to check all elements, use

$(this).jstree("check_all");

Regarding cookies, I haven't used it, but there is a plugin named jquery.cookie.js available. I suppose it contains methods to load/save data from/to a cookie. You have to bind another event, such as

.bind("change_state.jstree", function (evt, data) { ... } );

to capture the state-change and the initial loading in the loaded.jstree event would read from the cookie. Please check out this link to read more about cookie handling, both is mentioned - how you can use it with or without this plugin.

Update: jquery.cookie.js has been superseded by js-cookie, which has the functions Cookies.set('name', 'value'), var cval = Cookies.get('name'); and Cookies.remove('name'); for cookie handling.

---

The following snippet, which is a modified jsTree example, has 2 child nodes beneath Root node 2, which expands immediately after the control is loaded:

$(document).ready(function() {
  $('#treeView').jstree({
      'core': {
        'data': [{
            "id": "ajson1",
            "parent": "#",
            "text": "Simple root node"
          },
          {
            "id": "ajson2",
            "parent": "#",
            "text": "Root node 2"
          },
          {
            "id": "ajson3",
            "parent": "ajson2",
            "text": "Child 1"
          },
          {
            "id": "ajson4",
            "parent": "ajson2",
            "text": "Child 2"
          },
        ]
      }
    })
    .bind("loaded.jstree", function(event, data) {
      $(this).jstree("open_all");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<div id="treeView">
</div>

Answer 2

Matt's answer is all fine, but as jstree v3 is concerned use the ready.jstree event instead. Long story short:

$('#treeView').jstree(treeOptions) 
.bind("ready.jstree", function (event, data) {
     $(this).jstree("open_all");
});

Answer 3

$(function () {
    $('#userTree').jstree({
        core: {
            data: [
                { "id": "ajson1", "parent": "#", "text": "Simple root node" },
                { "id": "ajson2", "parent": "#", "text": "Root node 2" },
                { "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
                { "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
            ]
        }
    }).bind('loaded.jstree', function (event, data) {
        $(this).jstree('open_all');
    });
});