Maintain scrollbar position on postback of WebDataTree control

 

Hello Guys,

Have you ever tried to maintain the scrollbar position of WebDataTree after postback ?  If the answer is “yes” you may run a search over the API of the control for properties that allow this behavior. At the moment this scenario is not supported “Out of the box” and the developer using the control needs to write a few lines of code to make the scrollbar position persistent.

Below I am going to show a possible approach that could be adopted in order to maintain  the vertical scrollbar position over postbacks of the Tree.

Suppose that you have a large hierarchical data structure that needs to be presented in the tree and the vertical scrollbar of the control is shown. This particular implementation uses a HiddenField server control as a persistence mechanism. 

So, the WebDataTree in my sample looks like this :

 

 <script type="text/javascript">
 
        function maintainScrollBarPosition(sender, args) {
            //subscribe to onscroll event
            sender._element.onscroll = onScrollhandler;
 
            if ($get('<%=HiddenField1.ClientID %>').value !=="")
                    sender._element.scrollTop = $get('<%=HiddenField1.ClientID %>').value; 
        }
        function onScrollhandler() {
            $get('<%=HiddenField1.ClientID %>').value =
                                $find('<%=WebDataTree1.ClientID%>')._element.scrollTop;
                                 
        }
    </script> 

The function maintainScrollBarPosition() is attached to Initialize client – side event handler of WebDataTree control with this line of code 

<ClientEvents Initialize="maintainScrollBarPosition" />

So, If I have to summarize how this code works in order to maintain the vertical scrollbar position of the tree over postbacks I would describe it like this: When the WebDataTree is loaded manitainScrollBarPosition function is executed in response of Initialize event of the  Tree,

then I attach the onScrollhandler to onscroll event of the  tree which will be raised when the user changes the position of the vertical scrollbar. 

The HiddenField control uses ViewState to  persists the newly assigned value by onScrollHandler.

note here:  this code works only for the Vertical scrollbar