Disable the whole jsTree

Question

I'm using jsTree and have a form on the right of it based on the selected node that can be edited/saved. The goal is to prevent the user from clicking anywhere else on the tree while they are editing the form.

Is there any way to temp disable/enable the tree functionality while still keeping the tree visually available?

I tried using the disable_node(obj) method and apply it to the root of the tree but doesn't seem to be a solution.

Any suggestions? Or this is not a possible feature for the jsTree lib?

Thanks

Answer 1

To disable selected node do it this way:

var node = $("#tree").jstree().get_selected();
$("#tree").jstree().disable_node(node);

To disable all nodes use:

$('#tree li').each( function() {
    $("#tree").jstree().disable_node(this.id);
})

UPDATED

I didn't find a way to prevent opening a disabled node so I'm just disabling all the children of a closed node too.

See demo: Fiddle

Answer 2

How about this?

// get an instance of jstree.
var tree = $.jstree.create('#tree', { ... });

// disable all nodes with one line.
tree.disable_node(tree.get_json(null, { flat: true }));