Different icons for open and closed folders with types plugin

[cathal coffey]

I have read that it is not possible to supply different icons for closed and open folders using the types plugin.

So here are my type definitions.

"types" : {

    "file" : {

        "icon" : "glyphicon glyphicon-file"

    },

    "folder" : {

        "icon" : "glyphicon glyphicon-folder-open"

    }

}

However I still want different icons for open and closed and I am trying to achieve this via css using Bootstrap Glyphicons.

Why does the following not work?

li.jstree-open > a .jstree-icon {

    icon: "glyphicon glyphicon-folder-open";

}

li.jstree-closed > a .jstree-icon {

    icon: "glyphicon glyphicon-folder-close";

}

Thanks,

Cathal

[Ivan Bozhanov]

There is no CSS property called "icon" - I would not expect this code to work.
Since you have to apply the classes (and not simply style the nodes) you will have to use JS. Set the default to a closed folder icon, and then add these handlers

$('#your-tree').on('open_node.jstree', function (e, data) { data.inst.set_icon(data.node, "glyphicon glyphicon-folder-open"); });
$('#your-tree').on('close_node.jstree', function (e, data) { data.inst.set_icon(data.node, "glyphicon glyphicon-folder-close"); });

Best regards,
Ivan

[cathal coffey]

This worked perfectly thank you.

$('#tree').on('open_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-folder-open"); });

$('#tree').on('close_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-folder-close"); });

[Sergio Vasquez]

Ivan Bozhanov:

Your solution is:

$('#tree').on('open_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-folder-open"); });

$('#tree').on('close_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-folder-close"); });

But that solution is not the best one if you have a plugin type using different icons for each type as I do. Like that I am forced to use a switch-case in each of those function. What about expanding the type plugin and permit to define 2 icons per type used?

Regards,

Sergio