CODEWITHSUNDEEP
javascriptjquerytreejstree
freefaller
freefaller

Reputation: 19953

jstree - stop single expanded node from collapsing

Using jstree is it possible to block the collapse of a single specific node?

I have a tree structure which can be expanded/collapsed at will... but I have certain nodes that should always be open and not allow the user to collapse them.

Is there a way to block the collapse (maybe through the data-jstree attribute on the <li>)... and if possible, a way to also remove the triangle against the item?

I've tried hooking into the close_node.jstree event but neither using a return false or e.preventDefault() is stopping it happening.

In the following example, I want the "Item 2 - Must Keep Open" to ALWAYS be open, and not allow the user to hide the "Always Visible" item...

$(function() {
  $("#treeRoot").jstree({
    core: {
      themes: {
        variant: "small"
      }
    }
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.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>
<div id="treeRoot">
  <ul>
    <li data-jstree='{"opened":true}'>Root
      <ul>
        <li>Item 1</li>
        <li data-jstree='{"opened":true}'>Item 2 - Must keep open
          <ul>
            <li>Always Visible</li>
          </ul>
        </li>
        <li>Item 3</li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 2

Views: 1439

Answers (1)

Dekel
Dekel

Reputation: 62566

I couldn't find any option for preventing the closing of the node besides the option of overriding the close_node function of the jstree code.

Here is an example:

$(function() {

  $.jstree.core.prototype.old_close_node = $.jstree.core.prototype.close_node;
  $.jstree.core.prototype.close_node = function(obj, animation) {
    node_obj = this.get_node(obj);
    // in case the flag exists - don't continue to with the original function.
    if (node_obj.state.prevent_close) {
      return;
    }
    this.old_close_node(obj, animation);
  }
  
  $("#treeRoot").on('loaded.jstree', function() {
    $('#treeRoot li').each((index, el) => {
      if ($(el).data('jstree') && $(el).data('jstree').prevent_close) {
        $(el).addClass('prevent-close');
      }
    })
  }).jstree({
    core: {
      themes: {
        variant: "small"
      }
    }
  })
});
.jstree-default-small .jstree-open.prevent-close>.jstree-ocl {
  background-position: -71px -7px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.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>
<div id="treeRoot">
  <ul>
    <li data-jstree='{"opened":true}'>Root
      <ul>
        <li>Item 1</li>
        <!--                             v-- this is the flag to prevent the close -->
        <li data-jstree='{"opened":true, "prevent_close": true}'>Item 2 - Must keep open
          <ul>
            <li>Always Visible</li>
          </ul>
        </li>
        <li>Item 3</li>
      </ul>
    </li>
  </ul>
</div>

I didn't have the time to handle with the triangle, let me know if you have issues there, I'll try to find a solution for this one as well.

Upvotes: 1

Related Questions