Reflections on Software Development

Personal Blog of Mustafa Basgun

Maintain Scrollbar Position Inside UpdatePanel After Partial PostBack

with 17 comments

I have recently figured out that if there is a scrollbar’ed Panel control inside an UpdatePanel, it looses its scrollbar position after any type of partial postback within that UpdatePanel. There can be a GridView, a DIV container or another similar control instead of this Panel.

I have searched and found some workarounds at ASP.NET forums, and this specific one was the easiest one to implement into every situation in order to gain back the position of scrollbar. I enhanced it a bit by handling null cases and using the ClientID property. Here is the result:

 

Update

You can read the “Reusable JavaScript Component” version of this post in here. Thanks Matt!

Written by Mustafa Basgun

June 9, 2008 at 3:28 PM

Posted in AJAX, ASP.NET, UpdatePanel, Web Development

« DefaultDotAspx.com Is Launched…
Manual Sorting with ListView by Using Drag and Drop »

17 Responses

Subscribe to comments with RSS.

  1. Thanks for the code. A+ solution and a case for further study of JavaScript.

    Without it, I would have gone to a paged list instead of a scroll list because the resetting to the top by default is just not acceptable in a professional application.

    Paul Katkus

    June 14, 2008 at 10:21 AM

  2. [...] a new control extender or script control is not always the right fit for the job. Take the problem Mustafa was solving the other day … I have recently figured out that if there is a scrollbar’ed Panel [...]

    ASP.NET AJAX: Creating Reusable JavaScript Components (that are not Controls) @ ZDima.net

    June 14, 2008 at 7:48 PM

  3. First of all, I want to thank you very much for sharing your solution. Your JavaScript code works great.

    However, I have a strange situation which I could not figure it out what’s causing it. The scroll position is maintained perfectly when using VS2005, but in VS2008, even though it still works, I can see the scrollbar moving up to (0,0) position and then moving to the position desired. I do not understand the cause of this behavior, since the “endRequest” is fired before the page is rendered.

    If you have any ideas, I would really appreciate.

    Thanks.

    Luiz Lahamar

    June 17, 2008 at 10:12 AM

  4. The scrollbar moving up to (0,0) position and then moving to the position desired.

    I got the same problem. Any ideas would be appreciated.

    Sait

    August 20, 2008 at 3:34 AM

  5. Luiz and Sait,

    In VS 2008 with .NET 3.5 – if you see it broken, then check if your page has an Ajax Tab control.

    Ajax Tab control has a bug in .NET 3.5, and causes multiple render calls (hence the reset to 0,0 and back to the desired position in the scrollbar). But this problem is fixed in .NET 3.5 SP1. Try installing that.

    Raviokade

    August 23, 2008 at 12:37 PM

  6. Thanks a lot for the solution, you saved my day. This is the best solution I have found on the internet for this problem.

    Ganesh

    September 11, 2008 at 5:32 AM

  7. Hi there,

    Thank you for the solution. I have a listbox inside an update panel and I am facing the same problem as Luiz and Sait. The scrollbar of the listbox moves up to and comes back to the desired position. I do not have a tab control on my page.

    Any help would be greatly appreciated?

    Chandana

    September 16, 2008 at 8:57 AM

  8. Thanks! I don’t understand how it works – but it does :)

    Mike

    October 8, 2008 at 4:36 AM

  9. I used this method too. It still has its shortcomings. When you scroll from there (particularly by pressing the down arrow) the scroll again resets to the top. Does this happen to you?

    Tekknowledge

    November 6, 2008 at 12:55 PM

  10. Worked great for me. Very simple and elegant. Also provided additional understanding regarding the processing of partial postbacks. I am sure I will use this technique in the future.

    Thanks!

    John

    John

    December 29, 2008 at 5:44 PM

  11. Thanks for this solution. Your code works great. You saved my day.

    Parvez Khan

    January 22, 2009 at 12:52 AM

  12. Added to favorites.

    Danny117

    February 23, 2009 at 8:10 AM

  13. Thanks a lot. After going through many examples on the web which didn’t work for me, I came across your post. Saved a lot of time for me.

    Hiran Ganegedara

    March 30, 2009 at 9:17 AM

  14. Thanks a lot for providing very useful code for maintaining scroll position in panel.

    Purushottam

    April 24, 2009 at 6:42 AM

  15. Valeu mesmo Brother, mas foi difícil de copiar.

    Pedro

    May 12, 2009 at 12:06 PM

  16. Does not seem to work when using master pages.

    Ron

    May 29, 2009 at 10:25 AM

  17. Hi Mustafa,

    Your solution worked for me. It came as a life saver to me.

    Thanks!

    Sadha

    May 29, 2009 at 2:20 PM


Leave a Reply