M5A B4N

Personal Blog of Mustafa Başgün

Maintain Scrollbar Position Inside UpdatePanel After Partial PostBack

with 41 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!

About these ads

Written by Mustafa Başgün

June 9, 2008 at 3:28 PM

41 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 [...]

  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

  18. Thanks a lot. Great solution!

    Cevdet

    July 17, 2009 at 7:15 AM

  19. Thank you soooooo much! I looked around everywhere and your solution fit like a glove!

    DSL

    August 12, 2009 at 8:18 AM

  20. Thanks for this reply. Working fine.

    Durgesh

    September 10, 2009 at 4:04 AM

  21. Just regarding Master Page senarios:

    You need to add a ScriptManagerProxy and it will work fine.

    Aigeec

    March 19, 2010 at 4:13 PM

  22. I found a minor problem in this approach if the user is still scrolling while the postback is occurring. To resolve this, I added a function to stop the timer during the scrolling process:

    function startTimer() {
       var timer = $find(“”);
       timer._startTimer();
    }

    function stopTimer() {
       var timer = $find(“”);
       timer._stopTimer();
    }

    function startScroll() {
       stopTimer();
       var panel = $get(“”);
       var scrollPos = panel.scrollTop;
       while (scrollPos != panel.scrollTop) {
       }
       startTimer();
    }

    Hope this helps someone else.

    – Aigeec

    Aigeec

    March 23, 2010 at 4:49 PM

  23. Hi,

    I have the same problem with a DataList but your solution doesn’t work for my issue.

    Can you contact me for help please?

    Thanks.

    Stick

    May 17, 2010 at 7:06 AM

  24. Excellent solution, thank you very much for the contribution of code.

    KGS

    June 29, 2010 at 7:08 PM

  25. Thanks for this code!

    Praveen

    October 4, 2010 at 5:49 AM

  26. It is very helpful. Thanks a lot.

    Henry

    January 21, 2011 at 7:56 AM

  27. Just wanted to add my appreciation to the others in the comment area. I was really struggling to get my page with panel to remember the scroll position; this worked and the usability of my form is maintained! Sweet.

    Thanks a lot,
    Henrik

    Henrik

    February 14, 2011 at 11:23 AM

  28. I was searching for something like this, and here it is. Great work. Thanks for sharing.

    Anil

    April 25, 2011 at 3:26 PM

  29. Thanks for this article! You saved my day.

    sheccid

    May 19, 2011 at 12:50 PM

  30. Life saver!

    Damian

    June 16, 2011 at 10:12 AM

  31. Gracias man! Funciono perfectamente.

    Jmmg

    June 17, 2011 at 4:18 PM

  32. @Jmmg – No problema. Me alegro de que funcionaba.

    Mustafa Basgun

    June 27, 2011 at 3:18 PM

  33. This made it easier forever. Thanks a lot.

    Rakesh Shemadkar

    October 31, 2011 at 1:02 AM

  34. Works like a magic!

    Amna

    November 16, 2011 at 6:31 AM

  35. This was a great solution! There is one extra bit that I’m trying to work out though.

    When a user comes back to the page the next day, I’d like to preset their selections based on their previous session. Storing the x and y scroll positions in a cookie is no problem, but I’m not sure how to go about initializing the scroll positions when the page first loads. I tried reading the x and y cookie values in a script at the bottom of the page and setting the scrollTop and scrollLeft values but when the page is displayed the panel is scrolled to the top.

    Mark Schilling

    December 29, 2011 at 12:44 PM

  36. Usman Suglatwala

    February 21, 2012 at 12:26 PM

  37. It is perfect! Thank you.

    Crisarji

    June 16, 2012 at 10:43 AM

  38. Thanks. Works perfectly with MasterPage and Content.

    Zeyad

    February 8, 2013 at 9:11 AM

  39. What about having multiple panels inside UpdatePanel?

    Jo

    December 25, 2013 at 4:02 AM

  40. Excellent! Thanks. It works perfect with DIV, MasterPage and Content in Framework 4.5.

    Ric

    January 3, 2014 at 9:06 AM

  41. Worked like a charm. Thanks so much for this solution. You won’t believe it, but I lost 48 hours searching for a suitable solution. Excellent one obtained so far. God bless you and all who have commented here. Take care!

    George D'Souza

    April 16, 2014 at 2:02 AM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: