Problem with "initially_open" option with JStree

Question

I'm working on my first app using JStree and I have it doing almost everything I need as a navigation tree. I have the javascript code working that dynamically builds the html list structure for the page using knockoutjs (somewhat of an overkill here, but I use knockout elsewhere on the page). After I attach JStree to the HTML, my DOM looks likes -

<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 invokes JStree is

  $(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 like

My problem is that I want the menu initially have all nodes closed, then open only the node that represents the current page "selected" and it's parent nodes opened. When I try setting JStree "initially_open" to "menu_5" or "menu_6", then menu initially displays closed.

Long term, this is going to be a very complicated & multi-level structure. So the users are looking for this type of functionality. Suggestions?

Answer 1

Use the initially_select (instead of initially_open) option (ui section): set a unique id for the leaf-node (like 'init_sel') and then set this option in the ui section of jstree constructor:

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

Don't forget to add "ui" in the plugin list.

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