| RadControls version |
2008 Q3
|
| .NET version |
2.0
|
| Visual Studio version |
2005
|
| programming language |
JavaScript
|
| browser support |
tested on IE 6,7, 8 beta and Firefox 3
|
To scroll a node to the middle of the tree div you must change the scrollTop attribute of the tree div.
In the following code I call the function with the node to scroll to.
The function gets the available height and uses half of it to push up the scroller.
If the node is already in view the scroller is moved half of the offset of the node (getting it using findPosY function)
| function ScrollSelectedToMiddle(node) |
| { |
| // get the DOM element of the tree |
| var oDomTree = node.get_treeView().get_element(); |
| // set the tree to the upper most position |
| // we need this so the status will always be the same after the scrollIntoView operation (i.e. the node is aligned with the bottom) |
| oDomTree.scrollTop = 0; |
| // scroll to the node |
| node.scrollIntoView(); |
| // get half of the avilable height |
| var iHalfOfScreen = parseInt(oDomTree.offsetHeight/2); |
| |
| if (oDomTree.scrollTop == 0) { |
| // get offset of the node |
| var posY = findPosY(node.get_element()); |
| // in case the node is visible currently - use half of the Y position if possible |
| if (posY > iHalfOfScreen) { |
| oDomTree.scrollTop = parseInt(posY/2); |
| } |
| } else { |
| // the node is aligned with bottom - add half of the available height |
| oDomTree.scrollTop += iHalfOfScreen; |
| } |
| } |
| |
| //The findPosY function was "borrowed" from here: |
| // http://www.quirksmode.org/js/findpos.html |
| function findPosY(obj) |
| { |
| var curtop = 0; |
| if (obj.offsetParent) { |
| while (obj.offsetParent) { |
| curtop += obj.offsetTop |
| obj = obj.offsetParent; |
| } |
| } else if (obj.y) |
| curtop += obj.y; |
| return curtop; |
| } |
Attached is a demo project which has two trees and under them an input box to type a node ID and select it in both trees.
The first tree uses the built-in scrollIntoView and the second uses my added ScrollSelectedToMiddle function.