user2977468
user2977468

Reputation: 183

Finding difficulty trying to get the jsTree plugin to initialize in a closed state

Afternoon Everyone.

We're setting up a permissions tree for user profiles.
We use the jsTree plugin found here: jQuery jsTree Plugin

Over version is: 3.1.0
Their current version is: 3.1.0

Here's our usage:

/* Initialize any jsTress passed in. */
$( "." + section + "-panel-" + panel ).find( "div[class*='jstree']" ).each(function(){
    $(this).jstree( {   "core"      : { "data" : $.parseJSON( $(this).prev().html() ) },
                        "plugins"   : [ "checkbox","wholerow" ]  
                    } );

    /* Try to force close-all tree nodes. */
    $(this).jstree( "close_all",-1 );
})

We manually try to force close all nodes here, although it doesn't work. The JSON data passed into the initialization method includes node state attributes.

See actual data sample:

[
{ 
    "id":"ADMIN",
    "text":"ADMIN",
    "state":
    {
        "selected":false
    },
    "children":
    [
        {   
            "id":"ADMIN_ADD_STAFF",
            "text":"ADMIN_ADD_STAFF",
            "state":
            {
                "opened":false,
                "disabled":false,
                "selected":true
            }
        },
        {
            "id":"ADMIN_NEW_MSG",
            "text":"ADMIN_NEW_MSG",
            "state":
            {
                "opened":false,
                "disabled":false,
                "selected":true
            }
        }
        /* Truncated here for brevity of question. */
        /* See link below for complete data object. */
    ]
}
]

See PasteBin for copy of complete data object.

As you can see, the opened attrib is always false, yet we find the nodes always initialize in the opened state.

Screen shot of jsTree immediately after initialization

Nodes will close if you manually close them. Note: We are not using the plugin that enables node-state persistence in browser.

Just can't seem to see why the nodes won't initialize as closed... Thanks in advance!

Upvotes: 2

Views: 1438

Answers (1)

vakata
vakata

Reputation: 3886

Make sure to call close_all after the ready.jstree event has fired:

$(this),jstree(...).on('ready.jstree', function (e, data) {
  data.instance.close_all();
});

You can also simply configure jsTree not to expand the selected nodes onload: http://www.jstree.com/api/#/?q=expand&f=$.jstree.defaults.core.expand_selected_onload

$(this).jstree({
  core : {
    expand_selected_onload : false,
    ...

Best regards, Ivan

Upvotes: 1

Related Questions