jsTree checkbox checked from html data

Question

I have a ajax request returning data to show a tree with checkboxes. In de html data returned from the ajax call the check state of the items is defined using a custom data-checkstate attribute. How can i restore this check state in the tree?

Expected result:

expected result

<head>
    <meta charset="utf-8" />
    <title>JsTree test</title>

    <link rel="stylesheet" href="http://static.jstree.com/latest/assets/dist/themes/default/style.min.css" />
    <script src="http://static.jstree.com/latest/assets/dist/libs/jquery.js"></script>
    <script src="http://static.jstree.com/latest/assets/dist/jstree.min.js"></script>
</head>
<body>
    <div id="container"/>
</body>
</html>

<script>
    $(function () {
        var ajaxResponse = 
            '<ul> <li data-checkstate="undetermined">Parent 1' +
            '    <ul>' +
            '        <li data-checkstate="unchecked">Child 1a' +
            '            <ul>' +
            '                <li data-checkstate="unchecked">Grantchild 1a1</li>' +
            '                <li data-checkstate="unchecked">Grantchild 1a2</li>' +
            '            </ul>' +
            '        </li>' +
            '        <li data-checkstate="undetermined">Child 1b' +
            '            <ul>' +
            '                <li data-checkstate="unchecked">Grantchild 1b1</li>' +
            '                <li data-checkstate="checked">Grantchild 1b2</li>' +
            '            </ul>' +
            '        </li>' +
            '    </ul>' +
            '</li>' +
            '<li data-checkstate="unchecked">Parent 2' +
            '    <ul>' +
            '        <li data-checkstate="unchecked">Child 2a' +
            '            <ul>' +
            '                <li data-checkstate="unchecked">Grantchild 2a1</li>' +
            '                <li data-checkstate="unchecked">Grantchild 2a2</li>' +
            '            </ul>' +
            '        </li>' +
            '        <li data-checkstate="unchecked">Child 1b' +
            '            <ul>' +
            '                <li data-checkstate="unchecked">Grantchild 2b1</li>' +
            '                <li data-checkstate="unchecked">Grantchild 2b2</li>' +
            '            </ul>' +
            '        </li>' +
            '    </ul>' +
            '</li> </ul>';

        var tree = $("#container");
        tree.html(ajaxResponse);
        tree.on('loaded.jstree', function () {
            // restore tree state
            $('li[data-checkstate="checked"]').each(function () {
                $(this).addClass('jstree-checked');
            });
            $('li[data-checkstate="undetermined"]').each(function () {
                $(this).addClass('jstree-undetermined');
            });
        });

        tree.jstree({
            plugins: ["checkbox"],
            core: {
                "themes": {
                    "icons": false
                }
            }
        });
    });
</script>

Update: Edit: Moved to the answer

possible duplicate of [jstree checkbox checked on load](http://stackoverflow.com/questions/4128607/jstree-checkbox-checked-on-load) — emerson.marini, Jul 31 '14 at 08:22
You don't need to iterate with `each` for this functionality... Just `$('data-checkstate="checked"]').addClass('jstree-checked');` etcetera — Ruby Racer, Jul 31 '14 at 08:24
You should either remove your question or post an answer yourself and accept it — Yang, Sep 17 '14 at 11:36

score 4 · Answer 1 · answered Dec 10 '15 at 15:27

4

I know this is old but might be helpfull for someone.

To check the checkbox on load via HTML, set the class like in example:

<li id="123">
    <a href="#" class="jstree-clicked">Click me</a>
</li>

answered Dec 10 '15 at 15:27

Wojtek B

160
1
12

score 2 · Accepted Answer · answered Sep 18 '14 at 06:26

This did the trick for me:

var tree = $("#container");
    tree.html(ajaxResponse);
    tree.jstree({
        plugins: ["checkbox" ],
        core: {
            "themes": {
                "icons": false
            }
        }
    });
    tree.jstree(true).open_all();
    $('li[data-checkstate="checked"]').each(function() {
        tree.jstree('check_node', $(this));
    });
    tree.jstree(true).close_all();

score 1 · Answer 3 · answered Dec 23 '18 at 11:23

1

<li data-jstree='{"checked": true }'>View</li>

The above format worked for me. data-jstree='{"checked": true }'

answered Dec 23 '18 at 11:23

Ranju R

2,407
21
16

score 1 · Answer 4 · answered May 27 '20 at 14:20

1

Per jstree docs:

<li data-jstree='{"selected": true }'>Check Me</li>

You don't have to setup the inside anchor yourself this way and you don't have to toggle the checkboxes after it's already created/rendered.

answered May 27 '20 at 14:20

Tracy Moody

1,089
6
17

jsTree checkbox checked from html data

4 Answers4