dynatree - How to scroll to active node?

Question

I have dynatree with fixed height and vertical scrollbar.

node.activate(); selects the node i'm searching for, but doesnt move the vertical scrollbar, so i have to scroll manualy to see active node.

How do i scroll it programmaticlly?

---

Thanks to mar10, I solved this problem:

var activeLi = node.li;
$('#tree').animate({
    scrollTop: $(activeLi).offset().top - $('#tree').offset().top + $('#tree').scrollTop()
}, 'slow');

Answer 1

Dynatree does not have a built-in scrollTo functionality. But you should be able to use one of the existing methods and plugins, once you have the DOM element that you want to make visible.

In your case, you already seem to have a node object, so you can get the the associated <li> and <span> tag using node.li or node.span.

In general you can get the active node at any time by calling

var node = $("#tree").dynatree("getActiveNode");
// or
var node = $("#tree").dynatree("getTree").getActiveNode();

then get the associated DOM element:

var activeLI = node && node.li;

or handle the activation event:

onActivate: function(node) {
    var activeLI = node.li;
    ...
}

Once you have the element, use a standard method:

Scroll to a div using jquery , jQuery scroll to element , How to scroll to an element in jQuery? , ...

Edit 2014-05 Starting with Fancytree 2.0 autoScroll was added as a standard option.

Answer 2

I had a similar problem, and have not been able to get the scrollTop to work as stated in the example above. I fixed it by changing the selector from '#tree' to '.dynatree-container':

$('.dynatree-container').animate({ // animate the scrolling to the node
  scrollTop: $(activeLi).offset().top - $('.dynatree-container').offset().top + $('.dynatree-container').scrollTop()
}, 'slow');

This should get you going and save a few hours of frustrataion (:

By the way, I am using dynatree version 1.22 and jquery 1.8.3 and jquery ui 1.9.2.

Answer 3

There is a problem when using $('.dynatree-container') when you have more than one tree on the page, as this will try and select every tree with this class. I have lots of trees so I need to select the tree with a particular id... but I find, as did the previous person, that trying to select the tree by its id (eg '#tree') does not work. So, what will..? doing something like =$("#prevPageTree").dynatree("getTree").offset also does not work...

A few minutes later: ok, figured out how to do this. Spelunking around in the Chrome debugger shows that the .dynatree-container class is actually attached to the <ul> element inserted by dynatree under the #tree element used to initialize the dynatree instance. So you need to do something like

$("#tree ul").animate({ // animate the scrolling to the node
     scrollTop: $(activeLi).offset().top - $('#tree ul').offset().top + $('#tree ul').scrollTop()
}, 'slow');

And if, like me, you don't want it to scroll the node right to the top of the window, then

scrollTop: $(activeLi).offset().top - $('#prevPageTree ul').offset().top + $('#prevPageTree ul').scrollTop() - 150

will nicely put your node 150 pixels down