JStree open all parent nodes on load

Question

So,

Here is a source

 <ul>
  <li id="1">
    <a href="#">
      Product root
    </a>
    <ul>
      <li id="2">
        <a href="#">
          Electronicis
        </a>
        <ul>
          <li id="445">
            <a href="#">
              Computers
            </a>
            <ul>
              <li id="446">
                <a href="#">
                  SSD
                </a>
              </li>
            </ul>
            <ul>
              <li id="447">
                <a href="#">
                  GPU
                </a>
              </li>
            </ul>
            <ul>
              <li id="448">
                <a href="#">
                  MoBo
                </a>
              </li>
            </ul>
          </li>
        </ul>
        <ul>
          <li id="449">
            <a href="#">
              Navigation
            </a>
          </li>
        </ul>
      </li>
    </ul>
    <ul>
      <li id="3">
        <a href="#">
          Whatever
        </a>
      </li>
    </ul>
  </li>
</ul>

Nothing fancy just couple of nested lists...

And here is my load script for jsTree

$("#jsTreeContainer")
            .jstree({
                "plugins": ["themes", "html_data", "ui" , "search"]
            })            
            .bind("select_node.jstree", function(event, data) {

                var selectedObj = data.selected;
                alert(selectedObj.attr("id"));

            })            
            .delegate("a", "click", function (event, data) { event.preventDefault(); });
    });

What I would like to accomplish now is, to open node "Navigation" (id: 449) on page load. I've tried initally_open, initally_select parameters with no luck, I've even tried fiddling with search plugin, again no luck.

Has anyone managed to accomplish this, and how?

This must be a very common request but I can't find a solution for it.

I'm using master branch from gitHub, here... https://github.com/vakata/jstree

Cheers, T.

Can you provide working jsfiddle? – Radek Mar 18 '13 at 00:11 — Radek, Mar 18 '13 at 00:11

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

You can try using $(treeid).jstree('open_node',id);

$("#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); 
  } 
});

see this for more details jsTree Open a branch

edited May 23 '17 at 12:11

Community

1
1

answered Mar 15 '13 at 10:23

karthick

11,998
6
56
88

this doesn't work... data.rslt.obj is undefined. from what I can see new version of jsTree wraps objects in a different way. – talfirevic Mar 15 '13 at 12:18

score 0 · Answer 2 · answered Jun 14 '13 at 12:51

Dont know if it helps. But here's what I do:

    function openNode(tree, nodeId) {
        $(tree).jstree("select_node", "#" + nodeId);
        $(tree).jstree("toggle_expand", "#" + nodeId);
    }

Just pass the jsTree DOM-element and the ID (449) to the function.

JStree open all parent nodes on load

2 Answers2