Sunday, January 03, 2010

Set Page Position after asyncPostback

I will start this article, with one of the problem which I faced recently.

BackGround

I was working with a page. The page is divided into two parts.

1. Add/Update/Delete (I call it Area 1)
2. Listing of records (I call it Area 2)

I have used Repeater control with no paging (Though the records are more but my client hates paging. :) ). Above the repeater control, there were some textbox, dropdowns, checkbox, listbox etc. were placed used for add/update operations. There is a link button in the repeater control for every row, which when clicked opens the records in update mode. It fills all the control with data placed on Area 1 . Everything is placed in an UpdatePanel.

Problem

There were more than 10000 records listed in the repeater. When I click the very last record for editing, asynchronous postback happens and data is loaded for editing in Area 1 . But the problem was with the page position. I was not able to see the control's of Part1, as page was maintaining it's scroll position after async postback. This is what I don't want. As it's not at all user friendly. End-User will never come to know that record has been opened in edit mode. I set the "MaintainScrollPositionOnPostback" property to false but it was not working because of AJAX. Somehow, I want page position to be set to (0,0) so that I can see Area 1 controls.

Solution

The solution was to set Page position back to 0,0, at the end of ajax request. Here is what I did. See below code.

  
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
window.scroll(0,0);
}
</script>
Javascript provides a function scroll() which basically scrolls page position to the specified value. It takes two arguments Top and left. I passed it 0,0 and it worked for me.

Enjoy..

No comments:

back to top