ScrollIntoMiddle - scroll node to middle of tree div (with demo)

Thread is closed for posting
1 posts, 1 answers
  1. Answer
    Nir avatar
    14 posts
    Member since:
    Dec 2006

    Posted 18 Dec 2008 Link to this post


    RadControls version


    2008 Q3
    .NET version


    Visual Studio version


    programming language


    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    
        // 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:    
    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.
Back to Top