Check all parent nodes when child node is selected in jstree

Question

How can I check all parent nodes when a child node is checked in jstree?

$('#select_cats').jstree({
            "core" : {
                "themes" : {
                    "responsive": false
                }            
            },
            "types" : {
                "default" : {
                    "icon" : "fa fa-folder icon-state-warning icon-lg"
                },
                "file" : {
                    "icon" : "fa fa-file icon-state-warning icon-lg"
                }
            },
            "checkbox": {
                "three_state": false
            },
            "plugins": ["types", "checkbox"]
        });

Are you using the checkbox plugin? Also, could you give us the HTML of `#select_cats` or perhaps a fiddle? — Anders, Nov 07 '15 at 21:42

a828h · Answer 1 · 2020-06-24T13:00:14.360

This piece of code is the solution to this problem.

When you check a node, all of that nodes parents will automatically been checked

$('#categories').on('activate_node.jstree', function (e, data) {
      if (data.instance.is_leaf(data.node)) {
        var parentnode = data.node.parent
        do {
          data.instance.check_node(parentnode)
          parentnode = data.instance.get_node(parentnode).parent
        } while (parentnode)
      }
    })

Nikolay Ermakov · Answer 2 · 2016-02-04T20:00:06.447

0

If you set the "three_state" property to true you will get all parents up to the root checked, like here - JS Fiddle

If you want multiple items be selected at once so that the parent will turn to fully selected state, add "multiple" : trueto tree core config

edited Feb 04 '16 at 20:00

answered Nov 08 '15 at 02:24

Nikolay Ermakov

5,031
2
11
18

2

When "three_state" property is set to true then on select parent node its all child node get checked as well. which I don't want. Secondly I want parent node fully selected if any of its child is checked. – Ahmar Arshad Nov 11 '15 at 07:56
So you want parent nodes get fully selected if any of children is checked. What if the parent is checked? None of child nodes should get selected, just the parent stays selected? – Nikolay Ermakov Nov 11 '15 at 19:03

Majid Basirati · Answer 3 · 2016-10-08T07:24:01.623

0

You can use this code:

var selected = instance.get_selected(), i, j;
for(i = 0, j = selected.length; i < j; i++) {
  selected = selected.concat(instance.get_node(selected[i]).parents);
}
selected = $.vakata.array_unique(selected);
selected.pop('#');

All of selected nodes with parents is in selected variable.
https://groups.google.com/forum/#!topic/jstree/6rICTokWciU

edited Oct 08 '16 at 07:24

answered Oct 08 '16 at 07:16

Majid Basirati

2,665
3
24
46

score 0 · Answer 4 · answered Nov 06 '18 at 09:26

With JsTree 3.3.6 I got it in the following way:

// bind to events triggered on the tree
$('#ID_OF_TREE').on("changed.jstree", function (e, data) {
  var selected = [];
  for (i = 0; i < data.selected.length; i++) {
    selected = selected.concat($('#ID_OF_TREE').jstree(true).get_path(data.selected[i], false, true));
    //first false=I want an array; second true=I want only IDs
  }
  selected = selected.unique();
  console.log(selected);
});

Array.prototype.unique = function () {
  return Array.from(new Set(this));
}

Using this answer to remove duplicates and following the documentation.

Every time you select any checkbox, it will get all the parents of all checked checkboxes and push them into selected array. Finally it will remove duplicates coming from checked sibilings (which will cause multiple IDs of their parents in the array). data.selected is an array coming from the JsTree changed event.

Obviously you can bind this code anywhere you want, simply replacing data.selected with

var all_selected = $('#ID_OF_TREE').jstree(true).get_selected();

Check all parent nodes when child node is selected in jstree

4 Answers4