14

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:

all checked

But it should look like this:

some checked

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.

1
  • For anyone coming here with other issues of event suppression on initial load of the tree, please check out jstree.com/api/#/?q=refresh&f=refresh() for info on how to use the refresh event if you use it manually. I didn't look closely enough at the parameters like forget_state and it caused me a lot of trouble... Commented Jun 22, 2016 at 13:50

2 Answers 2

17

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
    });
-1

Here's my solution, if you instancied cascade like this, this should use the native cascade function after init and won't make any performance problems.

$tree.on('init.jstree', function(e, data) {
    data.instance.settings.checkbox.cascade = '';
}).jstree({
    core: {
        multiple: true,
        check_callback: true,
        data: {'Your own data'},
    },
    checkbox: {
        three_state: false,
        cascade: 'down'
    },
    plugins: [your own list]
}).on('loaded.jstree', function() {
    $tree.jstree(true).settings.checkbox.cascade = 'down';
})
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.