JsTree Checkbox check Based on data-id

Question

I want to check unchecked checkbox in based on data-id. On drop down change i want to check unchecked checkbox in jstree. I am Providing MY controller and Ajax Method bellow.

This is my jstree view.

Here is My Controller :

 [HttpPost]
    public ActionResult GetSingleUser(int id)
    {
        MachineShopDBEntities DB = new MachineShopDBEntities();
        var SPresult = DB.GetSingleUser(id).FirstOrDefault();
        return Json(SPresult);
    }

Here is my Script:

   $("#UserSelect").change(function () {
        $.post("/MenuMaster/GetSingleUser?id=" + $(this).val(),
                function (data, status) {
                    var databaseString = data.MenuEnable;
                    for (i = 0; i <= databaseString.length; i++) {
                        if (databaseString.substring(i, i + 1) == "1") {
                            $('.jstree-container-ul li[data-id=' + (i + 1) + ']').find('.jstree-anchor').addClass('jstree-clicked');
                        }
                    }    
                });
    });

Answer 1

Here I created demo for you.

Make changes according to code snippet below

jQuery(function ($) {
        $('.menux').jstree({

            "core": { "check_callback": false },

            "checkbox": { "keep_selected_style": false, "three_state": false, "tie_selection": false, "whole_node": false, },

            "plugins": ["checkbox"]

        }).bind("ready.jstree", function (event, data) {

            $(this).jstree("open_all");
            
        }).on("check_node.jstree uncheck_node.jstree", function (e, data) {

            var currentNode = data.node;

            var parent_node = $(".menux").jstree().get_node(currentNode).parents;

            if (data.node.state.checked)
                $(".menux").jstree().check_node(parent_node[0]);
            else
                $(".menux").jstree().uncheck_node(parent_node[0]);
        })

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />



<div class="menux">
    <ul>
        <li>
            Root node 1
            <ul>
                <li data-id="1"><a href="#" >Child node 1</a> </li>
                <li data-id="2"><a href="#" >Child node 2</a></li>
                <li data-id="3"><a href="#" >Child node 3</a></li>
                <li data-id="4"><a href="#" >Child node 4</a></li>
                <li data-id="24"><a href="#" >Child node 24</a></li>
            </ul>
        </li>
    </ul>
</div>

Edit:

First make sure you have disable three-state while initializing jsTree as mentioned in above code snippet.

Try to implement above $('.menux li').each function in your code. The below code is only sample to where you have to put this $('.menux li').each.

$("#UserSelect").change(function () {
        $.post("/MenuMaster/GetSingleUser?id=" + $(this).val(),
            function (data, status) {
                var databaseString = data.MenuEnable;

                $('.menux li').each(function (index, value) {

                    var node = $(".menux").jstree().get_node(this.id);

                    var id = node.data.id;

                    for (i = 0; i <= databaseString.length; i++) {

                        if (databaseString.substring(i, i + 1) == "1") {

                            if ((i + 1) == id) {

                                $(".menux").jstree().check_node(this.id);
                            }
                        }
                    }
                });
            });
    });

If you got any error like jsTree is not a function then you can replace above $('.menux li').each function with this

$('.menux li').each(function (index, value) {

            for (i = 0; i <= databaseString.length; i++) {

                if (databaseString.substring(i, i + 1) == "1") {

                    var dataid = $('#' + this.id).data('id');

                    if ((i + 1) == dataid) {

                        $('#' + this.id).find('.jstree-anchor').addClass('jstree-clicked');
                    }
                }
            }
        });