UpdatePanel scroll position

2020-02-15 c# asp.net webforms

I know there have been a ton of questions on this topic, and I have searched for an answer, but have been unable to find one that suits this particular situation.

I have an UpdatePanel that contains a GridView in which you can edit the values of the rows. When edited, for most of the values you need to choose an option from a DropDownList, so the rows are typically TemplateColumns with an ItemTemplate and an EditItemTemplate.

When you click to edit an item in the GridView, the columns of the table change widths to accommodate the dropdown lists. This means that when the UpdatePanel reloads with the grid in edit mode, the row you are trying to edit has scrolled down out of view, and it looks like it has disappeared unless you know to scroll down looking for it. Then, when you click the Save button, the GridView goes back into non-edit mode, so the columns change width again back to normal, and the row you just edited scrolls back upward, usually out of view.

Right now, I am trying the trick in the second answer on this page1. I have a templatecolumn with a link with the id "scroll200" or "scroll201" with the number being the integer that is the primary key for that row.

<asp:TemplateField>
  <ItemTemplate>
    <a id='scroll<%# Eval("ID") %>'></a>
  </ItemTemplate>
</asp:TemplateField>

There is an control at the top of the gridview, and in the grid_RowUpdating method I am setting that literal's text to:

<script>
var element_to_scrollto = document.getElementById('scroll201');

element_to_scrollto.scrollIntoView();
</script>

It is not currently working to scroll back to the position of the row that was edited, and I have no idea where to start as far as troubleshooting or another method to use. Any help would be greatly appreciated. Thanks!

Answers

Related