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

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.