Email Password Remember me?  Lost your password?

Introduction

Now a days it is very common between programmers to use HTML <div> tag to display scrollable Data Grids. But during post backs of ASP.NET pages maintaining the scroll position is always a tedious task and if a page contains multiple scrollable grids then it causes some real problems to maintain original scroll position for grids. In this article I am going to present a very easy way to maintain scroll position of various <div> tags as well as how to maintain the smart navigation of entire page with it.

Data Grid control of Microsoft .NET does not have a inbuilt scroll bar and to display scrollable Data Grid we need to embed Data Grid control within a HTML <div>. It is very easy to display such Data Grid like this: 

<div id="div1" style="OVERFLOW: auto; WIDTH: 100%; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; 
BORDER-LEFT-STYLE: none; HEIGHT: 200px; BORDER-BOTTOM-STYLE: none">
    Data Grid can be placed here.
</div>

 

Setting Smart Navigation of Page Through Java Script

A very simple code snippet of Java Script provides smart navigation and maintains scroll position of entire web page, this process uses window object and cookies collection of page. The code is:

<script language = "javascript">
    ///Attaching a function on window.onload event.

    window.onload = function()
    {
        var strCook = document.cookie; 
        if(strCook.indexOf("!~")!=0)
        { 
            var intS = strCook.indexOf("!~"); 
            var intE = strCook.indexOf("~!"); 
            var strPos = strCook.substring(intS+2,intE); 
            document.body.scrollTop = strPos; 
        } 
    }
    /// Function to set Scroll position of page before postback. 

    function SetScrollPosition()
    { 
        var intY = document.body.scrollTop; 
        document.cookie = "yPos=!~" + intY + "~!"; 
    }
    /// Attaching   SetScrollPosition() function to window.onscroll event.

    window.onscroll = SetScrollPosition;
</script>

Above Java Script sets the vertical scroll position of page in page cookie section and on window.onload it retrieve back scrolling position from cookie section and set document.body.scrollTop according to it.  

Setting Scroll Position of <div> Containing Controls Through Java Script

Now suppose you have a scrollable Data Grid on Page than it is very simple to associate the scroll positions of <div> containing Data Grid to page cookie section and than on same window.onload event we can set the scroll position of <div> also, to do this we need to add a new function which executes on scroll event of <div> and set the scroll position to the page cookie and a modification in function attached with window.onload event:

<script language = "javascript">
        
     ///This function sets the scroll position of div to cookie.

    function setScrollPos()
    {
        var divY = document.getElementById('div1').scrollTop; 
        document.cookie = "divPos=!*" + divY + "*!"; 
    } 
    ///Attaching a function on window.onload event.

    window.onload = function()
    {
        var strCook = document.cookie; 
        if(strCook.indexOf("!~")!=0)
        { 
            var intS = strCook.indexOf("!~"); 
            var intE = strCook.indexOf("~!"); 
            var strPos = strCook.substring(intS+2,intE); 
            document.body.scrollTop = strPos; 
        } 
        /// This condition will set scroll position od <div>.

        if(strCook.indexOf("!*")!=0)
        { 
            var intdS = strCook.indexOf("!*"); 
            var intdE = strCook.indexOf("*!"); 
            var strdPos = strCook.substring(intdS+2,intdE); 
            document.getElementById('div1').scrollTop = strdPos; 
        }
    }
    /// Function to set Scroll position of page before postback. 

    function SetScrollPosition()
    { 
        var intY = document.body.scrollTop; 
        document.cookie = "yPos=!~" + intY + "~!"; 
    }
    /// Attaching   SetScrollPosition() function to window.onscroll event.

    window.onscroll = SetScrollPosition;
</script>

Now we need to call setScrollPos() function on <div> tags onScroll event to do this modify HTML specification of <div> like this:

<div id="div1" style="OVERFLOW: auto; WIDTH: 100%; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; 
BORDER-LEFT-STYLE: none; HEIGHT: 200px; BORDER-BOTTOM-STYLE: none" onscroll="setScrollPos();">
    Data Grid can be placed here.
</div>

Above simple procedure provides smart navigation to scrolling <div> tags irrespective of what the <div> contains but a very common use of it is in scrollable Data Grids. Hope this article has given you a better idea to provide smart navigation on web pages. 

Thanks in advance for your comments.

You must Sign In to use this message board.

Per page 102550

FirstPrevNext

functionality not working k.goutam008 2:51 18 Jun '08   The functionality "Setting Smart Navigation of Page Through Java Script" is not working in my application. Sign In·View Thread·PermaLink 5.00/5 it's good and helpful hari102 0:36 10 May '07   thanks mukesh Sign In·View Thread·PermaLink 2.00/5 dinamic script to all div that you have AqsakMaboul 0:34 4 May '07   <script type="text/javascript" language="javascript"> window.onload = function() { scrollTo(); } function setScroll(val) { var divN = val.id; var divY = val.scrollTop; document.cookie = divN+"="+ divY +";"; } function scrollTo() { var strc = document.cookie; if (strc != '') { var cs = strc.split(';'); //document.getElementById('TextBox1').value = cs[1]; for(var i=0;i < cs.length;i++) { var c = cs[i].split('='); var nome = c[0]; var pos = c[1]; if (nome.charAt(0)==' ') { nome = nome.substring(1,nome.length); } document.getElementById(nome).scrollTop = pos; } } } </script> Sign In·View Thread·PermaLink 4.00/5 Very helpful.................... tprashanth 2:15 10 Apr '07   Nice article...... I'm using VS.NET 2003. My page has 3 frames. on the top frame I load data into a datagrid inside DIV tags(nearly 5000 records at a time). On the click of a link in the grid I will populate the bottom frames. I load a pdf image in the bottom left frame and relavant details in the bottom right frame. As the record count was huge I enabled the SmartNavigation="true". But this suddenly slowed the performance of the application. I was searching for an alternative solution for this. Thank you. Atlast I found the solution that I was searching for. Nice work. My rating is 5 out of 5. One question........... If cookies are disabled what will happen? Do you have a alternative solution for this. Warm Regards, Prashanth Sign In·View Thread·PermaLink Nice!!! Satya Kanithi 12:10 10 Jan '07   Simple solution to solve the scrolling issue... Sign In·View Thread·PermaLink Re: Nice!!! JoeReynolds 18:33 26 Feb '07   I'm looking for something to maintain scroll position on Ajax enabled pages where ajax postbacks may hide and reveal several asp panels before returning to the origination asp panel. Sign In·View Thread·PermaLink ASP.NET 2.0 always complains onscroll of a div kekelele 9:13 14 Nov '06   Hello, there: This is a very helpful article. I have two issues with the solution provided by you. (1) web page validator always complains that there is on such function "onscroll" defined for tag. (2) How do you make it work on IE7. It looks to me the scroll bars don't show up in IE 7 regards, Sign In·View Thread·PermaLink Use of Smart Navigation in Div interface Dominic Turner 0:18 31 Oct '06   Hi there - I am using an interface made out of divs in my master page. One of these divs is set as scrollable. This div has the content panel. Your code works great for me. However I have one small bugbear. It now maintains scroll position even when I am navigating to a new page. I would like to have this reset the cookie variable if the page name changes. I will try and give it a go. Sign In·View Thread·PermaLink 1.00/5 Thanks this helps me to solve the problem!! smileblue 8:59 28 Jun '06   I tried many ways. Only this one works for me. Sign In·View Thread·PermaLink Re: Thanks this helps me to solve the problem!! robocato 0:26 14 Jul '06   +1 thanks 4 this one Sign In·View Thread·PermaLink Thanks this was useful to me froman118 15:08 28 Dec '05   I'm not sure why people are rating this so low but it did the trick perfectly for me. Project I'm working on was using an iframe to display a table of data so I'm modifying it to use a scrollable div and editable DataGrid but couldn't use the normal Smart Navigation to remember scroll position. It would be very user-unfriendly to have to scroll through a list of a hundred or so records, hit edit and then have to scroll back down to where you were. Thanks for your contribution, it was a big help to me. Sign In·View Thread·PermaLink 2.43/5 Read this before rating the article Mukesh Kumar Gupta 3:13 2 Dec '05   Please post a comment before rating the article about content. It will be helpful for me to improve this article. Sign In·View Thread·PermaLink 3.00/5 Very usefull, but could be upgraded Wouter DW 2:01 1 Mar '06   Isn't it possible to make the code more dynamic? Why use !~ and !*? If you write out the strCook-variable you get "yPos=!~135~!; divPos=!*59*!" (without the quotes) If you split this on ";", then you have name-value-couples you have to split on the first "=". So don't use !~ and !*. If you also add the id's of the elements to the cookie, you can write code where you never have to change the onload-function (just get element-id and position from the cookie and adjust the value). eg: id1=div1; div1pos=36; id2=newDiv; newDivpos=73; (that's just a thought, there could be better options than this) And if you than change function setScrollPos() to one having the element-id as a parameter, this code also doesn't have to be changed at all. In that case you can have hundreds of divs with scrollbars without having to write an other letter of javascript. If I have the time I'll have a go at it, but time is very limmited for me and I am not used to writing javascript. Maybe there's somebody who knows more about writing javascript want's to post a more flexible version???? Greetings and thanks for the code. Wouter - Belgium Sign In·View Thread·PermaLink 2.00/5

Last Visit: 21:47 22 Nov '09     Last Update: 21:47 22 Nov '09 1