c# - Maintain scroll position in listboxes in updatepanels, NOT the page

Question

I have a listbox inside an update panel. When I scroll down and select an item, it scrolls back to the top of the listbox. I heard that the dom does not keep track of the scroll position on a postback. Does anyone have a solution/example on how to solve this?

Thanks, XaiSoft

Answer 1

You're running into this problem because the UpdatePanel completely replaces your scrolled <select> element with a new one when the asynchronous request comes back.

Possible solutions:

1. Use JavaScript to store the scrollTop property of the <select> element in a hidden form element before the UpdatePanel is submitted (by calling the ClientScriptManager.RegisterOnSubmitStatement method) and then setting it on the new <select> when the AJAX call comes back. This will be tedious, error-prone, and probably not very compatible (see here).

2. Use JavaScript to store the <select>'s selectedIndex property and re-select that item when the AJAX call comes back. Obviously this won't work if the user hasn't selected anything yet.

3. Don't use UpdatePanels. Try jQuery + ASP.NET page methods instead.