I'm using jsTree with the checkbox plugin. I have the cascade set to "down". This works great, except that when I want to load data with a mixture of checked and unchecked nodes, the cascade overrides the "state" setting for nodes. E.g.
var data = [
{"id":"p90","parent":"#","text":"Page1", "state": { "selected": true} },
{"id":"p100","parent":"p90","text":"Page2", "state": { "selected": true} },
{"id":"p101","parent":"p100","text":"Page3", "state": { "selected": false} },
{"id":"p102","parent":"p101","text":"Page4", "state": { "selected": true} },
{"id":"p103","parent":"p101","text":"Page5", "state": { "selected": false} }
];
$(function () {
$("#PageTree")
.jstree({
core: { data: data },
plugins: ["checkbox"],
checkbox: { cascade: "down", three_state: false },
expand_selected_onload: true
});
});
This results in this:
But it should look like this:
I tried setting the "cascade" setting after the tree is loaded, but that didn't work. It seems like the only option will be to write my own cascade code, but I'm looking for a slicker option.
This is what I ended up doing, which is the solution recommended by the developer of jsTree (https://github.com/vakata/jstree/issues/774):
$("#PageTree")
.on('select_node.jstree', function (e, data) {
if (data.event) {
data.instance.select_node(data.node.children_d);
}
})
.on('deselect_node.jstree', function (e, data) {
if (data.event) {
data.instance.deselect_node(data.node.children_d);
}
})
.jstree({
core: { data: pages },
plugins: ["checkbox"],
checkbox: { cascade: "", three_state: false },
expand_selected_onload: true
});
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