Disable all jsTree

Question

I use jsTree and have a form to the right of it based on the selected node, which can be edited / saved. The goal is to prevent the user from clicking anywhere on the tree while he is editing the form.

Is there a way to temporarily disable / enable the tree function while keeping the tree visually accessible?

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

Any suggestions? Or is this not possible for jsTree lib?

thanks

Answer 1

To disable the selected node, follow these steps:

 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 have not found a way to prevent the opening of a disconnected node, so I will just disconnect all children of the closed node.

See demo: Fiddle

Answer 2

Edit As pointed out by @charles, disabling nodes does not disable the menu plugin (at least using a custom menu) or drag'n'drop - point 4 has been added to take care of this

To disable the whole tree

• Disable all displayed nodes - disable each node by id or get an array of identifiers for one call to disable_node
• Prevent opening new nodes - intercept and block the click event on the open icon
• Prevent the opening of new nodes by double-clicking - change the current tree settings
• If the tree is modified by the user in any way, temporarily disable all settings core.check_callback = false

Note Point 2 is based on undocumented features and (given the history of the jstree plugin) probably won't work in future releases

See snippet for demonstration.

 var data1 = [{ "id": "W", "text": "World", "state": { "opened": true }, "children": [{"text": "Asia"}, {"text": "Africa"}, {"text": "Europe", "state": { "opened": false }, "children": [ "France","Germany","UK" ] }] }]; $('#Tree').jstree({ core: {data: data1, check_callback: true }, plugins: ['dnd','contextmenu','checkbox'] }) function DisableFlawed() { // this is not enough $('#Tree li.jstree-node').each(function() { $('#Tree').jstree("disable_node", this.id) }) } function Disable() { // disable visible nodes $('#Tree li.jstree-node').each(function() { $('#Tree').jstree("disable_node", this.id) }) // block open new nodes $('#Tree i.jstree-ocl') .off('click.block') .on('click.block', function() { return false; }); // eventually... dbl click $('#Tree').jstree().settings.core.dblclick_toggle = false; // eventually... block all edits $('#Tree').jstree().settings.core.check_callback = false; } function Enable() { // enable again visible nodes $('#Tree li.jstree-node').each(function() { $('#Tree').jstree("enable_node", this.id) }); // ublock open new nodes $('#Tree i.jstree-ocl') // .off('click.block'); // eventually... dbl click $('#Tree').jstree().settings.core.dblclick_toggle = true; // eventually... unblock all edits // set to true OR reset to whatever user defined function you are using $('#Tree').jstree().settings.core.check_callback = true; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" type="text/css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> <button onclick="DisableFlawed()">Disable (bad)</button> <button onclick="Disable()">Disable (ok)</button> <button onclick="Enable()">Enable</button> <div id="Tree"></div> 

Answer 3

In addition to Nikolai Ermakov’s answer, disabling nodes does not disable the menu plugin (at least with the custom menu) or drag'n'drop. If you want to do this, you need to add an additional check of these functions (tested with JsTree 3.2.1)

 $('#tree').jstree({ // ... contextmenu: { items: customMenu }, dnd: { is_draggable: function (node) { return !node[0].state.disabled; } }, }); function customMenu(node) { if (node.state.disabled) return false; // usual menu generation code } 

Another way is to use something jQuery BlockUI plugin to do some general locking outside jsTree.