[Solved] Scroll selected tree node in to view

[Andrew]

Hello,

Does anybody know how to scroll a selected tree node in to view?
I have a treeview in a div, under certain circumstances, this div is hidden from the user. When I set the div visible again, the selected node is not displayed.

Therefore I need to set the selected node visible again. Does anybody know how to do this?

Regards

Andrew

[Alex Gyoshev]

Hello Andrew,

You can use the DOM scrollIntoView method, or (if you want to make the scrolling more visually appealing), the jQuery scrollTo plug-in.

Kind regards,
Alex Gyoshev
the Telerik team

[Andrew]

Hi Alex,

That worked for me, thanks for your reply.

Andrew

[Federico]

This works for me (using jQuery ScrollTo Plugin):

$("#Tree").scrollTo(".t-state-selected")

or

$("#Tree").scrollTo(".t-state-selected", 0, {offset:-50})

[Christian]

Federico, your solution did not work for me, and I believe i know the reason.
When selecting the position of a li element inside a div, the position will always be relative to its parent, in my case, the ul element.
After severel tries, my only solution to get the scrollTo to work was this:

var diffelement = $('.k-state-focused').offset().top;
var diffdiv = $("#fileTreeContainer").offset().top; // the treeview container
var scrolledpx = parseInt($("#fileTreeContainer").scrollTop());  // how much has already been scrolled
var difference = (diffelement+scrolledpx) - diffdiv;

$("#fileTreeContainer").scrollTo( { top:difference+'px', left:0}, 500 );

This might not be the best soltion, but so far the only one that worked for all elements in my special case.