JSTree - disable selection on a parent node, but allow expansion on click

Question

I'm trying out the excellent JSTree 3.0.2. I have a tree with one level of child nodes. When a parent node is clicked I want it to expand, but I don't want the parent node to be selectable - only the child nodes should be selectable.

I can get the parent nodes to open on click using:

$("#jstree_div").bind("select_node.jstree", function (e, data) {
return data.instance.toggle_node(data.node);
});

But I can't figure out how to make the parent nodes non-selectable.
I've created a type and have set "select_node" to false:

"treeParent" : {
    "hover_node" : true,
    "select_node" : false
}       

And then assigned that to the parent node using:

data-jstree='{"type":"treeParent"}'

But the parent nodes are still selectable. I've created a jsfiddle here: http://jsfiddle.net/john_otoole/RY7n6/7/ In that example I am using the following to show whether something is selectable:

$('#jstree_div').on("changed.jstree", function (e, data) {
  $("#selected_element_div").text("Selected built-in: " + data.selected);
}); 

Any ideas on how to prevent selection of a parent node?

Answer 1

More than very late to the party, but using jsTree 3.0.4, decorating the root node like so:

<li data-jstree='{ "opened" : true, "disabled" : true }'>

opens the root when invoked and disables click. Hope it helps.

<div id="js_tree_container">
    <ul>
        <li data-jstree='{ "opened" : true, "disabled" : true }'>
            <a href="javascript:void(0);" tite="Root Category">
                ROOT NODE
            </a>
            <ul>
                <li>
                    <a href="javascript:void(0);">
                        <span>Child One</span>
                    </a>
                    <ul>
                        <li>
                            <a href="javascript:void(0);">
                                <span>Child A</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <span>Child B</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <span>Child Two</span>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

<script>
    $('#js_tree_container').jstree({
        'core': {
            'themes': {
                'name': 'default',
                'responsive': true
            },
            'check_callback': true
        }
    }).bind("select_node.jstree", function (e, data) {
        var href = data.node.a_attr.href;
        document.location.href = href;
    });
</script>

Answer 2

I know this is way late to the party here, but I had this same problem.

This is how I got around it -- maybe it will help someone else who is having this problem.

$('#divCCSS').on('select_node.jstree', function (e, data) {
            if (data.node.children.length > 0) {
                $('#divCCSS').jstree(true).deselect_node(data.node);                    
                $('#divCCSS').jstree(true).toggle_node(data.node);                    
            }
        })

Basically, deselect the node right after it has been selected if it has children, then expand it.

Answer 3

I had different issue to prevent select_node.jstree event for disabled items, but I think it can work for your case.

I solved my problem by using 'conditionalselect' plugin.

$('#jstree').jstree({
  'conditionalselect' : function (node) {
    // Check node and call some method
    return (node['someProperty']) ? true : false;
  },
  'plugins' : ['conditionalselect'],
  'core' : {
    <core options>
  }
});

You can check the node on click and trigger some expand collapse logic. You can also check this post : prevent jsTree node select