Search code examples
javascriptjqueryjstreejstree-dnd

js tree is not working in ie when handle check/uncheck event and set all check box true together


I am using jstree to bind data. I have checked (select) all checkbox and also call check/uncheck event of checkbox. it is working fine in Chrome but in IE i can handle check/uncheck event but it is not checked (select) all checkbox by default.

Please find below code :

$('#filterResult').jstree({
        "core": {
            "data": data,
            "themes": {
                "icons": false
            },
            check_callback: false
        },
        'checkbox': {
            three_state: true,
            cascade: 'none',
            whole_node: false, 
            tie_selection: false, // when remove this then all checkbox are selected by dafualt but check/uncheck event is not working
            real_checkboxes: true
        },
        "plugins": [
            "wholerow",
            "checkbox"
        ]
    })
        .on('loaded.jstree', function () {
            $("#filterResult").jstree().check_all(true);
           // $("#filterResult").jstree("select_all");               
        })
        .on("check_node.jstree uncheck_node.jstree", function (e, data) {

          console.log(data.node.id);
            }
        });

When I remove tie_selection: false from 'checkbox' then selected all checkbox in IE is working but fine but then checkbox check/uncheck event is not working.

Above code is working in Chrome.


Solution

  • For some reason the loaded.jstree event does not get triggered on IE (try setting break points, does not work).

    For that you can try replacing it with ready.jstree

    Here is pen of the code.

    Hope it helps !