Initially expand all parent nodes of an active child node

1,072 views

Skip to first unread message

Hurga Gonzales

unread,

Nov 2, 2015, 3:32:13 AM11/2/15

to Fancytree Q&A

I have a list converted to a FancyTree.

The init:




$("div[id^=msctree]").fancytree({
 checkbox: true,
 selectMode: 1,
 activeVisible: true,
 extensions: ['contextMenu'],
 contextMenu: {
 menu: {
   'edit': { 'name': 'Edit', 'icon': 'edit' },
 },
 actions: function(node, action, options) {
  if ( action == "edit" ) {
   ...someAction...
  }
 }
 }
});

The list:

<div id="msctree">
<ul>
<li>
Topmost parent
<ul>
<li>
Subnode
<ul>
<li data-activate="true" data-expanded="true" data-selected="true">
Active Node
<ul>
<li>
List with further dubs
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Another main node<ul><li>...</li></ul></li>
</ul>
</div>


What I want to achieve is that the "active node" path is initially expanded on page load. Unfortunately it isn't with the code above. So I think I missed something to set or I need to expande the path after the FancyTree has been created using the create event.

Thanks in advance.

Thanks in advance.

Hurga Gonzales

unread,

Nov 6, 2015, 5:54:06 AM11/6/15

to Fancytree Q&A

I've solved it. There is no option or internal function to make fancytree initially expanding the parents of an active subnode. But with the init callback we can create it ourselfs.

init: function(event, data) {
			var activeJumpNode = data.tree.getActiveNode();
			if ( activeJumpNode ) {
				var treeObj = $("div[id^=msctree]").fancytree("getTree");

				var jumpToNode = treeObj.findFirst(function(node) {
					return node === activeJumpNode;
				});
				jumpToNode.setActive();
				jumpToNode.setFocus();
				$(treeObj.$container).focus();
			}			
		}