Maintain Scroll Bar position of a div within a gri

Question

I used the following piece of code in the web.config in order to maintain the scrollbar position after a server postback:

<pages maintainScrollPositionOnPostBack="true" >
</pages>

All is working fine, but now i have a gridview encapsuled within a div with a scrollbar in the div (internal scrollbar).

When an event occur on one of the rows inside the gridview, the internal scrollbar doesn't maintain its original position unlike the outer one.

Any ideas?

Answer 1

I dont have a long long explanation and any explanation, the most important part is these codes work on my project.

<script  type="text/javascript">
// This Script is used to maintain Grid Scroll on Partial Postback
var scrollTop;
//Register Begin Request and End Request 
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
//Get The Div Scroll Position

function BeginRequestHandler(sender, args) 
{
var m = document.getElementById('divGrid');
scrollTop=m.scrollTop;
}
//Set The Div Scroll Position
function EndRequestHandler(sender, args)
{
var m = document.getElementById('divGrid');
m.scrollTop = scrollTop;
} 
</script>

this is from http://www.codeproject.com/Articles/30235/Maintain-GridView-Scroll-Position-and-Header-Insid

Answer 2

For future reference:

The normal procedure is to write the following in the web.config file:

  <system.web>
    <pages maintainScrollPositionOnPostBack="true" >
    </pages>
  </system.web>

This will preserve the scroll bar position of all web pages.

If you have a scroll bar within a gridview (or div) then use the following script:

<script type="text/javascript">
    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.getElementById("grdWithScroll").scrollTop = strPos;
        }
    }
    function SetDivPosition() {
        var intY = document.getElementById("grdWithScroll").scrollTop;
        document.cookie = "yPos=!~" + intY + "~!";
    }
</script>

And the div must be as follows:

<div id="grdWithScroll" …………  onscroll="SetDivPosition()">

http://michaelsync.net/2006/06/30/maintain-scroll-position-of-div-using-javascript-aspnet-20

Answer 3

You can do what you want, but it will need to be done client-side with something like jQuery. The following tutorial uses jQuery to determine the value of the scrollbar within your GridView control and then restore that value every time the $(document).ready function is called. In this manner your scroll bar will be reset to it's position before the postback as you wish.

Easily maintaining scroll position in GridView using jQuery

Answer 4

Try this,

 <script type="text/javascript">
  window.onload = function () {
               var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
               document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;
              }
   function SetDivPosition() {
           var intY = document.getElementById("<%=scrollArea.ClientID%>").scrollTop;
           var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
           h.value = intY;
     }

  function afterpostback() {

            var h = document.getElementById("<%=hfScrollPosition.ClientID%>");
            document.getElementById("<%=scrollArea.ClientID%>").scrollTop = h.value;

     }

</script> 

 <asp:HiddenField ID="hfScrollPosition" runat="server" Value="0" />
 <div id="scrollArea" onscroll="SetDivPosition()"   runat="server"  style="height:225px;overflow:auto;overflow-x:hidden;"> 

In the Page_Load

if (Page.IsPostBack) {
    ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "CallJS", "afterpostback();", true);
    }