Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expand jsTree node when parent is clicked

I am trying to implement a very simple tree using jsTree. I have found the documentation dense and overwhelming.

Right now, I expand / collapse a node by clicking the arrow shown here:

enter image description here

I want to be able to expand / collapse by clicking the node name too:

enter image description here

The code I am using is simple; I have not altered the javascript for jsTree:

<ul id="tree">
   <li>
      SubFolder1
      <ul id="tree">
         <li data-jstree='{"icon":"/Images/blue-folder.png"}'>Pub 1</li>
      </ul>
   </li>
</ul>
like image 676
John 'Mark' Smith Avatar asked Apr 14 '14 13:04

John 'Mark' Smith


3 Answers

$('#tree').on('select_node.jstree', function (e, data) {
    data.instance.toggle_node(data.node);
});

That worked for me. oerls solution did not.

like image 140
itmuckel Avatar answered Nov 03 '22 11:11

itmuckel


Just add an event listener in your html file and call the toggle_node function. This code below listens for a single click.

$(document).ready(function(){
  $('#jstree_div').on("select_node.jstree", function (e, data) { $('#jstree_div').toggle_node(data.node); });
}

If you want to listen for a double click you need another event listener, since jsTree does not support double click events yet.

$('#jstree_div').on("dblclick",function (e) { 
  var li = $(e.target).closest("li");
  var node = $('#jstree_div').get_node(li[0].id);

  $('#jstree_div').toggle_node(node)
});

Hope that helps.

like image 26
oerl Avatar answered Nov 03 '22 11:11

oerl


$('#jstree').on("select_node.jstree", function (e, data) { 
     $('#jstree').jstree("toggle_node", data.node);
 });

also this will work

like image 4
Abdulaziz N Avatar answered Nov 03 '22 12:11

Abdulaziz N