in

ASP.NET Weblogs

Andrew Frederick

Maintain Scroll Position after Asynchronous Postback

Do you want to maintain the scroll position of a GridView, Div, Panel, or whatever that is inside of an UpdatePanel after an asynchronous postback?  Normally, if the updatepanel posts back, the item will scroll back to the top because it has been reloaded.  What you need to do is “remember” where the item was scrolled to and jump back to there after the postback.  Place the following script after the ScriptManager on your page.  And since the _endRequest event of the PageRequestManager happens before the page is rendered, you’ll never even see your item move!

<script type="text/javascript">
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
    function BeginRequestHandler(sender, args) {
        xPos = $get('scrollDiv').scrollLeft;
        yPos = $get('scrollDiv').scrollTop;
    }
    function EndRequestHandler(sender, args) {
        $get('scrollDiv').scrollLeft = xPos;
        $get('scrollDiv').scrollTop = yPos;
    }
</script>

Comments

 

Marcel Boersma said:

This small script possibly saved my life. Very easy implementation in this way.

Thanks a lot. :)

March 6, 2008 4:03 AM
 

Wilson West said:

Pure sweetness - after looking all over for something like this, this is a easiest and most elegant solution yet.

March 24, 2008 4:14 PM
 

John Hunter said:

Looks like just the thing I was after - except...

The scrollDiv in my case is a panel which is the PopupControlId of a PopupcontrolExtender.  The panel itself has an updatepanel (to handle the selection/deselection of a checklistbox) inside it (as well as outside).  Am I just missing something on the $get (i.e. to find my panel inside of a nested updatepanel)? - Any help appreciated - as I'm almost there on a dropdown multi-select combo like control.

Thanks

March 26, 2008 5:33 AM
 

Emilio's Blog said:

How to Maintain Scroll Position inside UpdatePanel Control

March 28, 2008 4:27 PM
 

Simeon said:

Great help!

Thank you very much!

June 12, 2008 8:11 AM
 

simon said:

It has really helped me.Thanks a lot!

June 12, 2008 9:16 AM
 

John said:

it must have been me.

I never get this to work!

1) I have a master page,

2) A content page.

3) I put above Javascript at the bottom of my content page.

(of course, my master page has scriptmanager defined),

I then changed: all the $get('scrollDiv').xxx

To

$get('<%=scrollDiv.ClientID %>

of course, i have div id called scrollDiv with runat=server, which is where i want the scroll position to maintain after the postback.

I never get it to work.

Gotta be me.

Anyone? any clues?

June 27, 2008 10:23 PM
 

GIS in XML » Blog Archive » Server Side Detour said:

Pingback from  GIS in XML  &raquo; Blog Archive   &raquo; Server Side Detour

July 22, 2008 6:21 PM
 

GIS in XML » Blog Archive » Server Side Detour said:

Pingback from  GIS in XML  &raquo; Blog Archive   &raquo; Server Side Detour

July 22, 2008 7:05 PM
 

Nate said:

Excuse my ignorance, but can I put that code in a jscript file, and how exactly would I reference it in a div tag?

Thanks.

July 29, 2008 3:00 PM
 

Nash said:

If we added the div tag, and the size of the control is dynamic based on the conditions, it will not be good in the UI.

August 8, 2008 11:06 AM
 

Kannan said:

You are a ROCK........

Thankyou verymuch

September 27, 2008 5:23 AM
 

Brian said:

If you are having a problem with sys undefined... make sure you put this bit of script in your code after your gridview control. This will allow enough time for the scriptmanager to load from your master page if you are using one.

October 16, 2008 12:22 PM
 

Muhammad Hassan Tariq said:

You just saved my Life man, I was struggling with it since 3 days. Thanks alot keep on uploading such tips and tricks make sure you send me an email whenever you do new posting

Thank you

October 30, 2008 1:39 PM
 

Jim said:

I would like to say this post saved me hours. Cheers mate.

December 2, 2008 10:43 AM
 

dotnetguts said:

I have tried this trick but it doesn't work for me

I am applying to div tag for rating control? Is it has something to do with control.... Somehow i can't able to  get through your tip.  I am using Master Page/ Content Page scenario.

dotnetguts.blogspot.com/.../rating-control-ajax-display-message-on.html

December 6, 2008 5:38 PM
 

vvdhar said:

Any know how to get this to work when the script manager is in the master page and the panel (the position of which I need to maintain) is in the content page? I tried putting the above JS code at the bottom f the page I get a JS error saying 'Object required'. I think this is the line that does it

Sys.WebForms.PageRequestManager.getInstance();

and I think it is because my script manager is in the master page.

BTW, this works fine if I use it on another aspx page which has no master page.

December 9, 2008 4:36 PM
 

rvarcher said:

If you're trying to reference a Panel or a div that's runat server then the JS script needs the control's unique id, so I thought you could just do something like: $get('GridviewTestForArtie.ClientID') BUT this never retrieved the ClientID in my testing. One alternative is to just use an HTML DIV tag that's not run at the server so the ID you give it isn't changed, another alternative is to get the ClientID - the .Net generated ID (do a View Source or something) and put that in the JavaScript.

Also, this block of JS code needs to be after the DIV, Panel, whatever it is you're referencing.  If your ScriptManager is in your master page, and you put the code there but before your ContentPlaceHolder then it's not going to work. I believe it would be best to put it in the content page after the DIV or Panel. I did that and it worked for me.

December 23, 2008 5:54 PM
 

Sivaraj said:

You saved my life too...

February 5, 2009 6:59 AM
 

shiggity said:

This is about as helpful as helpful can get... awesome

March 13, 2009 8:12 PM
 

Ron said:

Is there any way you can convert this to work witha master page. All of the java script has to be run from the master page and this seems to break the code.

Thanks.

March 21, 2009 11:03 AM
 

Curt said:

Thanks a million!!!  Saved me hours.  You rule.

March 21, 2009 5:46 PM
 

Joe said:

Help!  I have used the script as given on a textarea within an Updatepanel. The textarea dimensions are set. The scrolltab does hold postion but I am getting some serious textarea flicker upon asynchronous postback. Is there a way to supress the flicker?

March 23, 2009 2:39 PM
 

Neha said:

Thank y ou Soooooooooooooo Much it is a great solution

April 21, 2009 5:16 AM
 

Sheebs said:

Sweet. Nice one mate! Works a charm

April 24, 2009 6:56 AM
 

Joe said:

I have multiple areas with scrollbars in separate updatepanels on the same page. I placed the script immediately after one scrollable area  and the scroll bar stays as advertised. great work. However, please tell me how to handle several on one page. This approach is not working with multiple scrollables. The later one gets the scrollbar functionality I want. Why I can't I place it just after the script manager and have it work? Thanks.

April 30, 2009 7:01 PM
 

Ratheesh said:

Thanks a lot ....!!!

May 1, 2009 4:00 AM
 

CD said:

Thanks. This helped a ton and saved a lot of time.. kuddos to you.

May 18, 2009 11:52 AM
 

Ben said:

Thanks, this really helped!

June 3, 2009 10:26 AM
 

Vishal Parekh said:

Thanks.

Excellent Solution.

June 9, 2009 3:28 AM
 

Mike said:

DUDE, I FREAKING LOVE YOU FOR THIS, I FEEL LIKE CRYING...I'VE SPENT FOREVER LOOKING FOR SUCH BEAUTIFUL CODE...FREAKING AWESOME

June 18, 2009 4:22 PM
 

skyeye said:

It's not working fine in Firefox, it seems something related with styles defined for element inside the div.

I reported everything here but i'm still trying to find a solution

www.webdeveloper.com/.../showthread.php

Would you like to help me? I think you have the same issue

Thank you

June 29, 2009 10:10 AM
 

AnHund said:

Great stuff. Thanks a lot :-)

July 5, 2009 8:14 AM

Leave a Comment

(required)  
(optional)
(required)  
Add