一开始由于我的GridView的名字有大写字母，一直不行。后来看了comment的一个人说把“postbackElement.id.toLowerCase().indexOf('grdorders') > -1”行去掉就可以，我去掉了果然就行了。然后回过头来，才发现这一行中是要小写字母比较的。其实这一行不用去掉。

Maintaining GridView Scroll Position in an ASP.NET AJAX UpdatePanel

Sometimes, it is inappropriate to use the paging feature of the ASP.NET GridView.  Instead, a scrolling grid is more applicable and enclosing the GridView in a <div> tag with the overflow style applied ensures that the over-sized element is clipped and that scroll bars are displayed.

<asp:UpdatePanel ID="updateGrid" runat="server" UpdateMode="Conditional">
<ContentTemplate>

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

<div id="divScroll" style="width:350px;height:200px; overflow-x:hidden; overflow-y:scroll;" onscroll="$get('hdnScrollTop').value = this.scrollTop;">
<asp:gridview id="grdOrders" runat="server" width="95%" datasourceid="objDataSource" cellpadding="3" GridLines="Horizontal">
<Columns>
<asp:CommandField ShowSelectButton="True" />
</Columns>
</asp:gridview>
</div>
</ContentTemplate>
</asp:UpdatePanel>

It is slightly more complex to persist the scroll position during an syschronous postback using ASP.NET AJAX.  It's necessary to store the scrollTop property of the div tag in a hidden field using the client side onscroll event.  Note the use of the Sys.UI.DomElement $get method, which is a shortcut to the getElementById method. It's also important that the hidden input element has the runat="server" attribute so the element can be accessed during the pageLoaded function.

<asp:ScriptManager ID="scriptManager" runat="server" EnablePartialRendering="True" />
<script type="text/javascript" language="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.toLowerCase().indexOf('grdorders') > -1) {
            $get("divScroll").scrollTop = $get("hdnScrollTop").value;
        }
     }
</script>

In order that the scroll position of the div can be reset after a postback, it is first necessary to add a reference to the PageRequestManager.  To use the PageRequestManager class in client script, you must first have a ScriptManager server control on the page. To access the PageRequestManager class, you must have the EnablePartialRendering set to true (the default) on the ScriptManager control. When EnablePartialRendering is set to true, the MicrosoftAjaxWebForms.js file that contains the PageRequestManager class is included as a script resource for the page.  Once you have the current instance of the PageRequestManager, you can access all of its methods, properties, and events such as beginRequest and pageLoaded.

The beginRequest event is raised before the processing of an asynchronous postback begins and the postback is sent to the server.  Here we get a reference to the element that has raised the postback. 

The pageLoaded event is raised after all content on the page is refreshed.  The function initially determines if the page has been posted back by checking the typeof the postbackElement.  If the postback was raised by a our GridView, the scrollTop property of our div tag is set to the value stored in the hidden field.

Client Page Life-cycle Events are also integral to Customizing Error Handling in Partial-Page Updates.

Posted by Miles Ashton at 9:47 PM

Labels: AJAX, ASP.NET

11 comments:

bebandit said...

Thanks! This helped me with adding Omniture (Site Tracking Tags) to my AJAX pages. Everytime the datagrid gets called it updates the omniture tags. Great post!

6:30 AM

Joe said...

I'm looking for siome code that will handle a scenario where an ajx page has a number of asp panels. The user begins in panel1 and begins looking at material, even paging while in panel 1.
At some point the user clicks on a link that exposes panel2. The user does some things in panel2 and when finised is returned to panel1.
I need to return the user to the original scroll position when leaving for panel2.

3:17 PM

Travis said...

I had to make some modifications to get this to work with a masterpage/contentplaceholder.
my page elements were being renamed to: ctl00_ContentPlaceHolder1_hdnScrollTop as an example.
I found this out by inspecting the page source.
Once I renamed all the elements referenced in the code, it now works :)

3:08 PM

Anonymous said...

Thanks, this was very helpful. I had to comment out the line:
if (postbackElement.id.toLowerCase().indexOf('grdorders') > -1) {
and put this line in a try / catch:
$get("divScroll").scrollTop = $get("hdnScrollTop").value;
Otherwise, it was great. Thanks!

1:23 AM

Anonymous said...

Wow - that is a beautiful thing!! Worked a treat for me, after I read the comment above about the masterpages.
cheers

12:07 PM

Anonymous said...

Travis, that will work sometimes. the ctl00_ContentPlaceHolder1_ is generated at runtime. therefore you cannoy guarantee that it will be the same everytime.

5:54 AM

Anonymous said...

This was a great post.
It worked out of the box for a non-masterpage webform.
With a masterpage I also had to change the ids to
ctl00_ContentPlaceHolder1_hdnScrollTop in the pageLoaded function and the onscroll call.
I also went with the try catch as recommended.
function pageLoaded(sender, args) {
try
{
$get("divScroll").scrollTop = $get("ctl00_ContentPlaceHolder1_hdnScrollTop").value;
}
catch(err)
{
}
}
THANK YOU!

5:56 AM

Anonymous said...

Thanks for the great post. Just wondering if there is a way to make the div visible/invisble from the code behind.

2:33 AM

Anonymous said...

Great post.
Just wondering how can I make my div visble/invisble from the code behind.

2:34 AM

l3dx said...

Thanks a lot, this helped me a lot!

5:38 PM

Hardysmith said...

Absolutely most helpful. I used your technique but rather than using a hidden form field I stored the scrolltop value in a javascript object. Brilliant.

12:19 AM

Post a Comment

MicrosoftMiles: Maintaining GridView Scroll Position in an ASP.NET AJAX UpdatePanel