jsTree 3.0 :How to default checked checkbox in JSON data

[Stefano Ceci]

Hello!

How to set default checked node with json data in stTree 3.0 version? Thanks

[Ivan Bozhanov]

What is your data source? HTML or JSON?

Either way - you need to look at passing the state with the node:
http://www.jstree.com/docs/html/ - search for "Setting initial state with data attribute" - you need selected
http://www.jstree.com/docs/json/ - search for "The format" - you need state -> selected

Best regards,
Ivan

[Stefano Ceci]

Thank you very much!

[chimos]

Hi,
in my project I'm using "tie_selection: false".
I see there is no "state: {checked:true}", only "selected:true". Am I right? How can I set the checked state trough the json string?

Thanks in advance

[Ivan Bozhanov]

Yes, you can set checked to true (in the state of each node, provided tie_selection is set to false).

Best regards,
Ivan

[Gerard Avila]

Hi Ivan, thanks for your quick answer,

I tried it already and is not working for me, am I doing something wrong?

In this example, jsTree should load 'Node 1' as checked, but it doesn't. Any idea?:

        $('#panel_38_content').jstree({

          "core" : { 

            "data" : [

              {

                "text" : "Root node", 

                "type" : "root", 

                "state" : { "opened" : true },

                "children" : [

                { "text" : "Node 1",

                  "state" : { "checked" : true },

                  "type" : "type-1",

                  "children" : [

                    { "text" : "Node 1-1",

                      "type" : "type-2"},

                    { "text" : "Node 1-2",

                      "type" : "type-2"}

                    ]},

                  

                  { "text" : "Node 2",

                    "type" : "type-1"}

                ]

              },

            ],

            "check_callback" : true,

            "themes" : { "variant" : "large", "icons" : true, "responsive" : true, "name" : "customtheme" }, 

            "multiple" : false

          },

          "checkbox" : { 

            "whole_node" : false, 

            "keep_selected_style" : true, 

            "three_state" : true,

            "tie_selection" : false

          },

          "state" : { 

            "key" : "jstree_state" 

          },

          "search" : { 

            "fuzzy" : false

          },

          "types" : {

            "#" : {

              "valid_children" : ["root"]

            },

            "root" : {

              "icon" : "icon fa fa-sitemap",

              "valid_children" : ["type-1"]

            },

            "default" : {

              "icon" : "icon fa fa-file-o"

            },

            "type-1" : { // The first level after the root

              "icon" : "icon fa fa-cubes",

              "valid_children" : ["type-2"]

            },

            "type-2" : { // The second level after the root

              "icon" : "icon fa fa-cube",

              "valid_children" : ["type-3"]

            },

            "type-3" : { // The third and last level after the root.

              "icon" : "icon fa fa-stop",

              "max_depth" : 0

            }

          },

          "plugins" : [ "checkbox", "search", "state", "wholerow", "types", "selectopens" ]

        });

--
You received this message because you are subscribed to a topic in the Google Groups "jsTree" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jstree/ebmn5znOYNc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jstree+un...@googlegroups.com.
To post to this group, send email to jst...@googlegroups.com.
Visit this group at http://groups.google.com/group/jstree.
For more options, visit https://groups.google.com/d/optout.

--
Gerard

[Gerard Avila]

I forgot to say, I checked the anchor with dev tools, and it doesn't have jstree-checked class neither, so it doesn't look like a style or graphic problem.

Thanks again

--
Gerard

[Ivan Bozhanov]

Provided you are using the latest version there should be nothing wrong with it - here is a demo:
http://jsfiddle.net/DGAF4/161/

Best regards,
Ivan

To unsubscribe from this group and all its topics, send an email to jstree+unsubscribe@googlegroups.com.

To post to this group, send email to jst...@googlegroups.com.
Visit this group at http://groups.google.com/group/jstree.
For more options, visit https://groups.google.com/d/optout.

--
Gerard

--
Gerard

[Gerard Avila]

Right, I understood the problem. I was using plugins ["state"] and the saved state had priority on the json values. It makes sense, since state plugin should take care of not saved changes.

Thanks alot for your attention. It was helpful again.

To unsubscribe from this group and all its topics, send an email to jstree+un...@googlegroups.com.

To post to this group, send email to jst...@googlegroups.com.
Visit this group at http://groups.google.com/group/jstree.
For more options, visit https://groups.google.com/d/optout.

--
Gerard

[Joseph Benckert]

I'm having a similar issue.  The only difference is that I'm consuming json from a server.

Here is my configuration:

$("#permissionAssignmentTree")

               .on('ready.jstree', function(e, data) {

                   //makes the root nodes not clickable

                   $('.root-node > a').each(function() {

                       $(this).click(false);

                       $(this).dblclick(false);

                   });

                   

               })

               .jstree({

                   'core': {

                       'data': {

                           "url": "doesnot matter"

                       },

                       checkbox: {

                           tie_selection: false

                       }

                   },

                   "plugins": ["checkbox"]

               });

The tree renders fine but does not respect the checked state.  Here is a snip of the json:

   {

        "li_attr": null,

        "a_attr": null,

        "id": "Area-23",

        "text": "PHL2",

        "children": ...,

        "state": { "checked": true }

      },

To unsubscribe from this group and all its topics, send an email to jstree+un...@googlegroups.com.
To post to this group, send email to jst...@googlegroups.com.
Visit this group at http://groups.google.com/group/jstree.
For more options, visit https://groups.google.com/d/optout.

--
Gerard

--
Gerard

--
You received this message because you are subscribed to a topic in the Google Groups "jsTree" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jstree/ebmn5znOYNc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jstree+un...@googlegroups.com.
To post to this group, send email to jst...@googlegroups.com.
Visit this group at http://groups.google.com/group/jstree.
For more options, visit https://groups.google.com/d/optout.

--
Gerard

[David Marshall]

The link you give to the jstree doc about setting initial state for HTML is not helpful with regard to setting a node's checkbox to checked or unchecked.  It says:

You can use any combination of the following: opened, selected, disabled, icon within the data-jstree
attribute of the <li> tag

None of these will set the intial checked state of a node.   See this fiddle https://jsfiddle.net/marshall62/ex72vbmq/

I'm not seeing how you'd set Child-2 to be checked within data_jstree.  Can this be done by adding attributes to the li tags or must one 

use JSON to represent the tree?

I've searched for hours trying to find how to set a node's initial checked state when a tree is defined as HTML li tags

and have yet to find a solution.  

Can you please explain how to do this.  

[Ranju R]

https://stackoverflow.com/a/53903185/1259116

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

data-jstree='{"checked": true }' worked for me