ASP.NET Gridview moving to the top after clicking a rowcommand

Question

I have a asp.net data grid view with a button field. After clicking the button field whole page refreshes and moves to the top of the grid view. I need to stay at the last click position. I've tried the following and its not working. MaintainScrollPositionOnPostback="true"

Answer 1

The smoothest way to solve this would be to utilize AJAX so that the entire page doesn't reload on postback. Depending on your exact scenario, the easiest way to accomplish this would be to throw the grid in an UpdatePanel.

https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.updatepanel?view=netframework-4.8

Answer 2

Never was aware that the MaintainScrollPositionOnPostback tag existed!!

but, what you can do is as noted is wrap the gv in a update panel.

So, assuming this markup:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="ID" CssClass="table table-hover" width="40%">
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
        <asp:BoundField DataField="LastName" HeaderText="LastName"  />
        <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
        <asp:BoundField DataField="City" HeaderText="City"  />
        <asp:BoundField DataField="Description" HeaderText="Description"  />

        <asp:TemplateField HeaderText="" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <button id="cmdDelete" runat="server" class="btn" 
                    onserverclick="cmdDelete_ServerClick" >
                    <span aria-hidden="true" class="glyphicon glyphicon-trash"> Delete</span> 
                </button>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

And code behind to fill is this:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadGrid();
    }

    void LoadGrid()
    {
        string strSQL = @"SELECT * FROM tblHotels ORDER BY HotelName";
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                conn.Open();
                DataTable rstData = new DataTable();
                rstData.Load(cmdSQL.ExecuteReader());
                GridView1.DataSource = rstData;
                GridView1.DataBind();
            }
        }
    }

So we now have this:

But if I scroll down, and then use the delete button in above, it does cause a post-back, and thus the grid scrolls back to top.

However, as suggesed, we can wrap the GV in a update paneal.

So, right after form tag, drag + drop in a script manager.

Then collapse the gv, and then drag + drop in a update panel.

Then wrap the update panel around the GV like this:

Now, when you click a button on the grid, it will not post back the whole page - your position should remain.