How to disable select/deselect when double clicking on node text #2746

RainetteWithLove · 2023-09-25T17:25:14Z

RainetteWithLove
Sep 25, 2023

Hi,

Right now, using the select treeview given on the hompage : https://www.jstree.com/ when you double-click on the node text, there is 2 visible action type:

It select then deselect the node (overiding any previous selection inside the sub-groups),
It expand/collapse the group.

Here is the code.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <!-- 2 load the theme CSS file -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
  <!-- 3 setup a container element -->
  <div id="jstree">
    <!-- in this example the tree is populated from inline HTML -->
    <ul>
      <li>Root node 1
        <ul>
          <li id="child_node_1">Child node 1</li>
          <li>Child node 2</li>
        </ul>
      </li>
      <li>Root node 2</li>
    </ul>
  </div>
  <button>demo button</button>

  <!-- 4 include the jQuery library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
  <!-- 5 include the minified jstree source -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
  <script>
  $(function () {
    // 6 create an instance when the DOM is ready
    $('#jstree').jstree({
      "plugins" : ["checkbox"]
    });
    // 7 bind to events triggered on the tree
    $('#jstree').on("changed.jstree", function (e, data) {
      console.log(data.selected);
    });
  });
  </script>
</body>
</html>

In my case, that's is the first action i dont want anymore: i only want to expand/collapse when doucle-clicking on the text of the node. I'll use only the checkbox to select/deselect nodes.

i've seen the https://www.jstree.com/api/#/?f=$.jstree.defaults.core.dblclick_toggle option in the api reference. But this is the complement fo what i want.

i've added this code:

$('#jstree').on('click.jstree', function (e) {
        console.log("single click")
    });
$('#jstree').on('dblclick.jstree', function (e) {
    console.log("double click")
});

As far as i can see, when double-clicking on a node, multiple events are fired (in this order specifically):

single click,
single click
double click.

from a browser perspective i perfectly understand: you can't wait for a second click to be sure if it is a double click or a signle click. Hence my idea: intercept the click event on the text node to prevent it to propagate. I asked chatGPT to assist me, as I'm no javascripter, and it gave me this to add:

$('#jstree').on('click.jstree', function (e) {
    if ($(e.target).hasClass('jstree-anchor')) {
        console.log("stop!!!");
        e.stopImmediatePropagation();
    }
});

This give me this new html file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <!-- 2 load the theme CSS file -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
  <!-- 3 setup a container element -->
  <div id="jstree">
    <!-- in this example the tree is populated from inline HTML -->
    <ul>
      <li>Root node 1
        <ul>
          <li id="child_node_1">Child node 1</li>
          <li>Child node 2</li>
        </ul>
      </li>
      <li>Root node 2</li>
    </ul>
  </div>
  <button>demo button</button>

  <!-- 4 include the jQuery library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
  <!-- 5 include the minified jstree source -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
  <script>
  $(function () {
    // 6 create an instance when the DOM is ready
    $('#jstree').jstree({
      "plugins" : ["checkbox"]
    });
    // 7 bind to events triggered on the tree
    $('#jstree').on("changed.jstree", function (e, data) {
      console.log(data.selected);
    });

    $('#jstree').on('click.jstree', function (e) {
        if ($(e.target).hasClass('jstree-anchor')) {
            console.log("stop!!!");
            e.stopImmediatePropagation();
        }
    });
  });
  </script>
</body>
</html>

Of course, it does not work as expected. It works, as it prints "stop!!!" in the console, but it is too late. Moreover, with a bit of criticism, this handler work on the whole tag (as the tag has the class "jstree-anchor"), and i'm not sur it will work as the checkbox is part of the element.

How could i achieve what i'm expecting ?
Thank you for your work and your help.

Rainette,

EDIT:

I've run some more test and my doubts about the function given by chatGPT are not to have. Indeed, when i click on the checkbox, it does not log anything, meaning the function is not called. So, it is just a timing thing: how to call this function before jstree handle the clicks.
Typos

RainetteWithLove · 2023-09-25T21:31:27Z

RainetteWithLove
Sep 25, 2023
Author

Ok, so... i kept trying and i've found a way.

I used the conditionalselect plugin with this function:

function (node, event) {
  if ($(event.target).hasClass('jstree-checkbox')){
      return true;
  }
  return false;
}

It checks if the target of the event is the checkbox (and not the text). If so, it return true allowing the selection of the node. I got the following html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <!-- 2 load the theme CSS file -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.16/themes/default/style.min.css" />
</head>
<body>
  <!-- 3 setup a container element -->
  <div id="jstree">
    <!-- in this example the tree is populated from inline HTML -->
    <ul>
      <li>Root node 1
        <ul>
          <li id="child_node_1">Child node 1</li>
          <li>Child node 2</li>
        </ul>
      </li>
      <li>Root node 2</li>
    </ul>
  </div>
  <button>demo button</button>

  <!-- 4 include the jQuery library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
  <!-- 5 include the minified jstree source -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.16/jstree.min.js"></script>
  <script>
  $(function () {
    // 6 create an instance when the DOM is ready
    $('#jstree').jstree({
      "plugins" : ["checkbox", "conditionalselect"],
      "checkbox": {
        "whole_node": false,
      },
      "core": {
        'dblclick_toggle': true,
      },
      "conditionalselect" : function (node, event) {
        if ($(event.target).hasClass('jstree-checkbox')){
            return true;
        }
      return false;
    },
    });
    // 7 bind to events triggered on the tree
    $('#jstree').on("changed.jstree", function (e, data) {
      console.log(data.selected);
    });
  });
  </script>
</body>
</html>

It seems to work as i want. There is still a minor problem: when i double click on the checkbox, the tree expand/collapse.
I'm still trying to figuring out how is done the decoupling between functions (tree manipulation vs. tree selection). It's not perfectly clear to me. But i've already found a way to filter some behaviour !

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to disable select/deselect when double clicking on node text #2746

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to disable select/deselect when double clicking on node text #2746

Uh oh!

Uh oh!

RainetteWithLove Sep 25, 2023

Replies: 1 comment

Uh oh!

RainetteWithLove Sep 25, 2023 Author

RainetteWithLove
Sep 25, 2023

RainetteWithLove
Sep 25, 2023
Author