Is this possible to have checkbox only on the Leaf Nodes of JSTREE?

[Tree Rocker]

Is this possible to have checkboxes only on the LEAF NODES of the JSTREE?

Or this can be possible to disable the checkboxes of all other nodes expect LEAF NODES.
The main requirement behind this is that USER can not able to select Parent Node of JSTREE, only LEAF nodes should be selectable.

Please help me in this. Thanks in advance.

[Tree Rocker]

Actually I am using the two trees on the same page.
One tree feature having only Leaf Nodes check box
And another tree having the all checkbox selection.

So Is there any javascript solution for the same?

On Tuesday, March 11, 2014 11:21:52 AM UTC+5:30, Ivan Bozhanov wrote:

Write a CSS rule targeting:
.jstree li.jstree-open > a.jstree-anchor > i.jstree-checkbox,
.jstree li.jstree-closed > a.jstree-anchor > i.jstree-checkbox { display:none; }

That should do it.

[Eduard Toews]

$("#tree1").jstree(...).find("li.jstree-open i.jstree-checkbox, li.jstree-close i.jstree-checkbox").hide()

[Ivan Bozhanov]

This WILL NOT WORK - do not use this!!!

[Ivan Bozhanov]

The CSS solution will be fine - just prefix with the ID of the tree you want it applied to (the DOM ID) - any JS solution will be much much slower anyway.

#id-here .jstree-open > .jstree-anchor > .jstree-checkbox,
#id-here .jstree-closed > .jstree-anchor > .jstree-checkbox { display:none; }

[Tree Rocker]

Hi Ivan,

Thanks for the help that thing is working but while I click on the node still the 'change.jstree' event is fire even it does not have checkbox.
It seems to be an issue. Please provide me solution for the same.

[Tree Rocker]

Even though the checkbox is not there, I can still able to select node.

[Ivan Bozhanov]

Sorry, I missed the part about being unselectable - you have to raise the "disabled" flag on those nodes (from the state property of the node json). If you do not like the grayish look the nodes get - you can tweak it a bit using CSS.

Best regards,
Ivan

[djo...@gmail.com]

Here is an improved revised version of a method I used to achieve this:

$('#jstree-element')
    .on("select_node.jstree deselect_node.jstree", function (e, data) {
        if(data.node.children.length) {
            e.preventDefault(); // may not be necessary
            e.stopImmediatePropagation();
            // uncomment below if you wish to have the parent item open/close the tree when double clicked
            //return data.instance.toggle_node(data.node);
        }
    })
    .on('loaded.jstree', function (e, data) {
        $(element).find('li.jstree-open > a.jstree-anchor > i.jstree-checkbox, li.jstree-closed > a.jstree-anchor > i.jstree-checkbox').hide();
    })
    .on('open_node.jstree close_node.jstree', function (e, data) {
        $(element).find('li.jstree-open > a.jstree-anchor > i.jstree-checkbox, li.jstree-closed > a.jstree-anchor > i.jstree-checkbox').hide();
    })
    .jstree({
        // init your tree here
    });

Also note this will allow your to open/close the tree as well by clicking on the parent items.

[Ivan Bozhanov]

Write a CSS rule targeting:
.jstree li.jstree-open > a.jstree-anchor > i.jstree-checkbox,
.jstree li.jstree-closed > a.jstree-anchor > i.jstree-checkbox { display:none; }

That should do it.

11 март 2014, вторник, 07:47:15 UTC+2, Tree Rocker написа:

[Andrzej Zielezinski]

Ivan, 

this worked perfectly. Is there a way to hide only these checkboxes which are shown in root nodes (1st level of the tree). I would like to have other checkboxes visible.