Go to DotNetFunda.com
 Online : 1439 |  Welcome, Guest!   Login
 
Home > Articles > ASP.NET AJAX > Set Page Position after asyncPostback in AJAX

Submit Article | Articles Home | Search Articles |

Set Page Position after asyncPostback in AJAX

red flag  Posted on: 1/4/2010 1:46:02 AM by Virendradugar | Views: 1249 | Category: ASP.NET AJAX | Level: Beginner


This article explains a simple trick to set the page position to any coordinates after async Postback.



Introduction
I will start this article, with one of the problem which I come across 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.
 
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 due to 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..

If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.

Found interesting? Add this to:

| More



Please Sign In to vote for this post.

 
Latest post(s) from Virendradugar

Latest Articles
Experience:3 year(s)
Home page:http://virendrablogs.blogspot.com
Member since:Tuesday, August 11, 2009
Level:Silver
Status: [Member]
Biography:Virendra Dugar is experienced Senior Software Developer with over 3 years of hands-on experience working with Microsoft .NET technology (ASP.NET, C#, VB.NET,SQL Server). He is always keen to learn new technology. He holds a Master's Degree in Computer Application & Information technology from Gujarat University in india.In free time, he loves to listen music, read books, play games and do blogging etc.

Visit his blog :
http://virendrablogs.blogspot.com
http://virendradugar.wordpress.com

Submit Article

About Us | The Team | Advertise | Contact Us | Testimonials | Privacy Policy | Terms of Use | Link Exchange | Members | Go Top
General Notice: If you found plagiarised (copied) contents on this page, please let us know the original source along with your correct email id (to communicate) for further action.
Copyright © DotNetFunda.Com. All Rights Reserved. Copying or mimicking the site design and layout is prohibited. Logos, company names used here if any are only for reference purposes and they may be respective owner's right or trademarks. | 9/3/2010 4:28:45 AM