I have a jstree with checkbox for every nodes. I want to achieve the following. Let me know which method or part of api helps us to do that.
I searched API docs but found nothing.
Take a look at the real_checkboxes options. This might get you started:
$("#jstree").jstree({
"checkbox": {
real_checkboxes: true,
real_checkboxes_names: function (n) {
var nid = 0;
$(n).each(function (data) {
nid = $(this).attr("nodeid");
});
return (["check_" + nid, nid]);
},
two_state: true
},
"plugins": ["themes", "json_data", "ui", "checkbox"]
})
.bind('open_node.jstree', function (e, data) {
$('#jstree').jstree('check_node', 'li[selected=selected]');
})
You'll probably need to change the bind behaviour so that it checks the parent when a child is checked.
As of JSTree version 3.1.1 here is what I would do:
$('#data').jstree({
'core' : {
'data' : [
{ "text" : "Root node", "children" : [
{ "text" : "Child node 1" },
{ "text" : "Child node 2" }
]},
{ "text" : "Root node 2", "children" : [
{ "text" : "Child node 1" },
]}
]
},
'checkbox': {
three_state: false,
cascade: 'up'
},
'plugins': ["checkbox"]
});
JSFiddle Demo
Note that the magic here happens with the checkbox parameters.
From the documentation:
three_state: a boolean indicating if checkboxes should cascade down and have an undetermined state. Defaults to
true
.
cascade: This setting controls how cascading and undetermined nodes are applied. If 'up' is in the string - cascading up is enabled, if 'down' is in the string - cascading down is enabled, if 'undetermined' is in the string - undetermined nodes will be used. If
three_state
is set totrue
this setting is automatically set to 'up+down+undetermined'. Defaults to ''.
This documentation was found inside of the source code for v.3.1.1
EDIT I just checked v3.3.0, and although the documentation changed for these attributes (in my opinion, for the worse), the code works just the same. In the meantime though it looks like these attributes are listed in their API: three_state and cascade and as of writing this seem to have better documentation than the source code.
Keep in mind that if you have multiple child nodes underneath a parent, checking just one of the children will not check the parent. All nodes must be checked to take effect on the parent.
Hope this helps!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With