Scroll bar reset on GridView in ASP.NET

Question

I am using a GridView and ListBox in a page. Gridview contains the data from database bind as DataSource. When clicking on an item in GridView the list box displays the sub items.

My problem occurs when there is a scrollbar in GridView. When I select the last item from the grid view, the sub items are displayed and the scrollbar is going to up. I can't see which item is selected.

Answer 1

You will need to generate row ids or record the scroll position before postback. Use the javascript function

yourGridId.scrollTo(x,y) 

and pass the previous x and y positions that you have saved before the postback.

Save the values in a hidden field so that it can be accessed on the server side.

Answer 2

SOLUTION:

Place a hidden field as

<input type="hidden" id="hdnScrollTop" runat="server" value="0" /> 

and in the div add a function

<div id="dvScroll" onscroll="$get('ctl00_ContentPlaceHolder1_hdnScrollTop').value = this.scrollTop;">

JavaScript:

var prm = Sys.WebForms.PageRequestManager.getInstance();         
prm.add_pageLoaded(pageLoaded);
prm.add_beginRequest(beginRequest);
var postbackElement;
function beginRequest(sender, args) {
   postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args)  {
   var updatedPanels = args.get_panelsUpdated();
   if (typeof (postbackElement) == "undefined") {
      return;
   }
   if (postbackElement.id.indexOf('gridViewList') > -1) {
     try {
         $get("divScroll").scrollTop = $get("ctl00_ContentPlaceHolder1__hdnScrollTop").value;
     }
     catch (Err) {
     }
}}

This solved my problem.

Answer 3

I suggest you reading the answers to the question Reset scroll position after Async postback - ASP.NET