Geting all the selected nodes in jstree on check event?

Question

I'm using get_bottom_selected to get all the checked/selected nodes in JSTree. When I setup a button in my form that calls the following method it works. When I try to call the same function from check box click event it does not find any selected nodes, even if there are some.

function testit() {
    var data = $('#my_tree').jstree(true).get_bottom_selected(true);
    for(var count = 0; count < data.length; count++){
        // Do Stuff 
    }
}

When the following event fires I want to call the function and get all the selected child nodes, but it does not work. Is there something specific to do on this event that works different than calling from a button click event?

.on("check_node.jstree uncheck_node.jstree", function(e, data) {
            testit(); // first line of this function does not get any selected data, even if several are selected. When called from a button click event in my form it does work. 
            });

Here's how I currently have my jstree setup.

$('#my_tree')
.on("changed.jstree", function (e, data) {
    // Do Stuff
})
.jstree({
checkbox: {
    "keep_selected_style": false,
    "visible" : true,
    "three_state": true,
    "whole_node" : true,
},
plugins: ['checkbox'],
    'core' : {
    'multiple' : true,
    'data' : {
    "url" : "/static/content_data.json",
    "dataType" : "json" 
    }
}
})
.on("check_node.jstree uncheck_node.jstree", function(e, data) {
    testit();
});

score 7 · Accepted Answer · answered Jan 03 '19 at 00:28

Because of the strict mode you will get the exception that if you try to use get_bottom_checked

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them. at Function.invokeGetter (<anonymous>:2:14)

You can use data.selected from your check or uncheck event handler if you just want the ids of selected nodes but if you need more than that you can use 'data.instance._model.data'. As you can see in my example I am trying to alert if there is only one item selected and that's state is open. In the code example, you can see the Alert if you open the `Europe1 and select the checkbox.

var data1 = [{
  "id": "W",
  "text": "World",
  "state": {
    "opened": true
  },
  "children": [{
      "text": "Asia"
    },
    {
      "text": "Africa"
    },
    {
      "text": "Europe",
      "state": {
        "opened": false
      },
      "children": ["France", "Germany", "UK"]
    }
  ]
}];

function testit(data) {
  alert(data.length + ' and ids are ' +data );
  for (var count = 0; count < data.length; count++) {

  }
  
}
$('#Tree').jstree({
  core: {
    data: data1,
    check_callback: false
  },
  checkbox: {
    three_state: false, // to avoid that fact that checking a node also check others
    whole_node: false, // to avoid checking the box just clicking the node 
    tie_selection: false // for checking without selecting and selecting without checking
  },
  plugins: ['checkbox']
})
$('#Tree').on("check_node.jstree uncheck_node.jstree", function(e, data) {
 if (data.selected.length === 1) { alert(data.instance._model.data[data.selected].state['opened']); }
  testit(data.selected);
});

<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>
<div id="Tree"></div>

Thanks. This got me very close to what I need. Is there a way to get the children from the selected parent? When I click a parent, all the children are selected, but in this example the selected is just the parent. Ultimately I just need all the checked children. Something like this: $('#mytree').jstree(true).get_bottom_selected(true); - Can i get this information from data.instance._model.data[data.selected] ? — user1904898, Jan 03 '19 at 16:15
`When I click a parent, all the children are selected, but in this example the selected is just the parent. ` because I am passing three_state: false, // to avoid that fact that checking a node also check others — Narendra, Jan 04 '19 at 01:56

score 2 · Answer 2 · edited Jan 08 '19 at 09:53

2

According to this you can get all selected nodes on change event like this:

    $('#jstree').on('changed.jstree', function (e, data) {
    var i, j, r = [];
    for(i = 0, j = data.selected.length; i < j; i++) {
      r.push(data.instance.get_node(data.selected[i]).text);
    }
    $('#event_result').html('Selected: ' + r.join(', '));
  }).jstree();

edited Jan 08 '19 at 09:53

leopal

4,711
1
25
35

answered Jan 08 '19 at 09:07

Palak Jadav

1,202
1
11
23

Geting all the selected nodes in jstree on check event?

2 Answers2