The problem with the "initial_open" option with JStree

Question

I am working on my first application using JStree, and for me it does almost everything I need as a navigation tree. I have javascript code that dynamically creates an html list structure for a page using knockoutjs (this is somewhat redundant, but I am using knockout elsewhere on the page). After I attach the JStree to HTML, my DOM looks pretty -

<div id="menuTreeList" data-bind="template: "treeMenuTemplate"" class="navtree jstree jstree-0 jstree-focused jstree-default"> <ul class="jstree-no-dots jstree-no-icons"> <li id="menu_1" class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><span> <a href="#" class=""><ins class="jstree-icon">&nbsp;</ins>CARES Home</a></span> </li> <li id="menu_2" class="jstree-closed"><ins class="jstree-icon">&nbsp;</ins><a href="#"> <ins class="jstree-icon">&nbsp;</ins>Case Management</a> <ul> <li id="menu_3" class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><span class="navtree-spanDefault"> <a href="#"><ins class="jstree-icon">&nbsp;</ins>Search</a></span> </li> <li id="menu_4" class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><span class="navtree-spanDefault"> <a href="#"><ins class="jstree-icon">&nbsp;</ins>Participant Summary</a></span> </li> <li id="menu_5" class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><span class="navtree-spanDefault"> <a href="#"><ins class="jstree-icon">&nbsp;</ins>Transfer WP Office</a></span> </li> <li id="menu_6" class="jstree-last jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><span class="navtree-selected">Update Individual Address</span> </li> </ul> </li> <li id="menu_7" class="jstree-last jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Tools</a></li> </ul> </div> 

My Javascript that calls JStree,

  $(document).ready(function () { $("#menuTreeList").jstree({ "themes": { "theme": "default", "dots": false, "icons": false }, "plugins": ["themes", "html_data"], "core": { "animation": 0, "open_parents": true, "initially_open": ["menu_5"] } }); }) 

The resulting menu looks

My problem is that I want the menu to initially close all nodes, then open only the node that represents the current page is “selected”, and the open parent nodes. When I try to set JStree "initial_open" to "menu_5" or "menu_6", the menu first displays a closed one.

Long-term, it will be a very complex and multi-level structure. Therefore, users are looking for this type of functionality. Suggestions?

Answer 1

Use the initially_select parameter (instead of initially_open ) (section ui): set a unique id for the leaf node (for example, "init_sel"), and then set this parameter in the ui section of the jstree constructor:

 "ui" :{ "initially_select" : ["#init_sel"] } 

Remember to add "ui" to the list of plugins.

If you use json_structure data as data, set the state object in the parent node (s) to "open" when you create the JSON structure.