jstree checkbox checked on load

Question

I'm fighting with jQuery jsTree plugin checkbox. Ok, I have find out how to handle events on checking or unchecking checkbox. If its useful I can paste a code:

.bind("check_node.jstree", function(e, data)
        {

            if(data.rslt.obj !== undefined && data.rslt.obj.attr(\'id\') !== undefined)
            {

                jQuery.ajax({
                        async : false,
                        type: "POST",
                        dataType: "json",
                        url: "adsmanager/adsfields/ajaxappendcategory",
                        data:
                        {
                            "id" : data.rslt.obj.attr(\'id\'),
                            "itemId" : "' . Yii::app()->getRequest()->getParam('id') . '",
                        },
                        success: function(r)
                        {
                            if(r === undefined || r.status === undefined || !r.status)
                            {
                                data.rslt.obj.removeClass(\'jstree-checked\');

                                data.rslt.obj.addClass(\'jstree-unchecked\');

                            }
                            else
                            {
                                niceBox(\'ok\');
                            }
                        }
                    });

            }

            return true;
        })

With this everything is ok, but know I cant find anywhere how to checked checkboxes on tree load, for example, if I'm using jsTree like category selector for my news Item when I create new news item everything is ok and when I want to update that item I need jsTree with selected categories and that's I cant find any example how to select nodes on loading jsTree.

Any help with this question?

Absolutely

I have found that it is possible to set 'selected' options in your config as array, but it's not working. – Absolutely

Answer 1

If you are using JSON_DATA, add class:jstree-checked to the node's attr object:

{
  "data": "node name",
  "attr": { "id": "node id", "class":"jstree-checked" }
}

Vendor

If you are using the JSON format from here : jstree.com/docs/json, instead of 'attr', use 'a_attr' – Aesthete

Just noticed this only shows that it's checked it doesnt set it to checked. So to uncheck it you have to click twice. Which is pointless. To get around this you need to set checked : true in the state attribute. So "state" : { checked : true } – Aesthete

Answer 2

For current JSTREE version 3.2.1 and JSON data we need use state : { checked : true }

and add to config for checkbox section

"checkbox":{ "tie_selection": false }

this example work fine

data : [
            { "text" : "Root", state : { opened : true }, children : [

                { "text" : "Child 2", state : { checked : true },

]

Synectics

How to make de same with html data? You know? Thanks – Gloria

Answer 3

Try this:

$("#jstree").jstree(true).load_node('#');

It worked for me.

Here are related reference:

https://groups.google.com/forum/#!topic/jstree/bPv19DwQYFU

Topi

Thanks for the link as the reply is by the creator of JsTree – Cusec

Answer 4

I have found the solution by setting checkbox plugin option two_state to true

"checkbox" => array(  "two_state" => true)

and then if you are using Xml data add class="jstree-checked" in params

everything fine :)

good luck ;)

Absolutely

Answer 5

To complete earlier answers above, with latest v3.3.7 at least, the specification of BOTH state.selected and a_attr.class are required for a leaf checkbox to be initialized as checked with the checkbox plugin. This seems to explain why mytree.node_select("leafId") function alone does not accomplish this programatically, presumably because the child a class attribute also has to be set to jstree_checked.

var mytree = $( "myjstreediv" ).jstree();
var leafParentId = "#";
var name = "My test node";
var visible = true;
if (visible)
   leafId = mytree.create_node(leafParentId, {
      text: name, 
      state: { selected: visible }, 
      a_attr: { class: "jstree-checked" } 
   });
else
   leafId = mytree.create_node(leafParentId, name);

Jhvh

Answer 6

May be this will help you more - jstree v1

<script src="@Url.Content("~/Scripts/jquery.jstree.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.cookie.js")" type="text/javascript"></script>

below - for check and uncheck event bind for jstree

<script type="text/javascript">
        $(document).ready(function () {
            Refresh();
        });

        function Refresh() {
            var dataId = {};
            $('#MainTree')
              .bind("before.jstree", function (e, data) {
              })
            .jstree({

                "json_data": {
                    ajax: {

                        "url": function (node) {
                            var url;
                            if (node == -1) {
                                url = "";
                            } else {
                                var id = $(node).data("id");
                                url = "?categoryId=" + id;
                            }
                            var productId = $("#Product_ProductId").val();
                            if (!productId) {
                                url = "/Products/GetTreeData" + url;
                            } else {
                                url = "/Products/GetTreeData/" + productId + url;
                            }
                            return url;
                        },

                        //"url": "@Url.Action("GetTreeData", "Categories")",
                        "type": "GET",
                        //"data": JSON.stringify(dataId),
                        "dataType": "json",
                        "contentType": "application/json charset=utf-8",
                    },
                    progressive_render: true
                },
                "themes": {
                    "theme": "classic",
                    "dots": true,
                    "icons": true,
                    "url": "@Url.Content("~/content/themes/classic/style.css")"
                },
                "types": {
                    "max_depth": -2,
                    "max_children": -2,
                    "valid_children": ["folder"],
                    "types": {
                        "default": {
                            "valid_children": "none",
                            "icon": {
                                "image": "@Url.Content("~/gfx/file.png")"
                            }
                        },
                        "folder": {
                            "valid_children": ["default", "folder"],
                            "icon": {
                                "image": "@Url.Content("~/gfx/folder.png")"
                            }
                        }
                    }
                },
                "plugins": ["themes", "json_data", "ui", "types", "checkbox"]

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

                var productId = $("#Product_ProductId").val();
                if (!productId || productId < 1) {
                    data.inst.hide_checkboxes();
                } else
                    data.inst.change_state('li[selected=selected]', false);
            })
            .bind("check_node.jstree", function (e, data) {
                var productId = $("#Product_ProductId").val();
                if (!productId)
                    return;
                $.post(
                    "@Url.Action("ProductCategoriesSaveData", "Products")",
                    {
                        "ProductCategory.ProductId": productId,
                        "ProductCategory.CategoryId": $(data.rslt.obj).data("id")
                    },
                    function (r) {

                        //Display message if any
                        if (r.Message) {
                            alert(r.Message);
                        }

                        //Display error if any
                        if (r.ValidationError) {
                            $.jstree.rollback(data.rlbk);
                            alert(r.ValidationError);
                        } else {
                            if (r.NewCreatedId) {
                                $(data.rslt.obj).data("mapId", r.NewCreatedId);
                            }
                        }
                    });
            })
            .bind("uncheck_node.jstree", function (e, data) {
                var productId = $("#Product_ProductId").val();
                if (!productId)
                    return;
                var mapId = $(data.rslt.obj).data("mapId");
                $.ajax({
                    async: false,
                    type: 'POST',
                    url: "@Url.Action("ProductCategoryDelete", "Products")",
                    data: {
                        "id": mapId
                    },
                    success: function (r) {
                        //Display message if any
                        if (r.Message) {
                            alert(r.Message);
                        }

                        //Display error if any
                        if (r.ValidationError) {
                            alert(r.ValidationError);
                        } else {
                            data.inst.refresh();
                        }
                    }
                });
            });
        }
    </script>

Server side Asp.net MVC

Nessa

Answer 7

"state" : { "selected" : true } Makes a checkbox selected

 $('#frmt').jstree( { 
        'core' :  {
            'data' : [{ 
                    "text" : "root text",
                    "state" :  {  "opened" : true  } ,
                    "children" : [{ 
                            "text" : "child text",
                            "id" : "idabc",
                            "state" :  {  "selected" : true  } ,
                            "icon" : "jstree-file",

                    }]
                 },

            ]},
            'checkbox': {
                      three_state: true
             },
            'plugins': ["checkbox"]
     });

Undernourished

Answer 8

Try this:

 $('#jstree').jstree({
      core : {
      data : [
        { "text" : "Root", state : { opened : true }, 
    children : [
            { "text" : "Child 1", state : { selected : true } },
            { "text" : "Child 2", state : { checked : false, opened : true }, 
    children : [
                { "text" : "a", state : { checked : true, opened : true }},
                { "text" : "b", state : { checked : false, opened : true }}
                
            ]}
            
        ]}
       ],
       },
      checkbox : {
       tie_selection : false  
       },
     plugins : ['checkbox']
    });

Find data:

    var jsonNodes = $('#jstree').jstree(true).get_json('#', { flat: true });
    $.each(jsonNodes, function (i, val) {   
            if($("#jstree").find("a#" + this.id + "_anchor").hasClass("jstree-checked")){
                console.log("Selected:" + this.id);
                }
            else if($("#jstree").find("a#" + this.id + "_anchor i:first-child").hasClass("jstree-undetermined")){
                console.log("Selected:" + this.id);
                }
            else {
                console.log("Un Selected:" + this.id);
                }
        }

Roodepoortmaraisburg

Answer 9

In each item of node use state -> selected: true or false to checked or not checkbox.

// Expected format of the node (there are no required fields)

{
  id          : "string" // will be autogenerated if omitted
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  children    : []  // array of strings or objects
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

Link references: https://www.jstree.com/docs/json/ -> go to "JSON data" tab

Feinstein