How to maintain scroll position of a page when add dynamic rows in GridView?

Question

In my web page, I have an LinkButton inside FooterTemplate, when I Add new row in GridView by using RowCommand. LinkButton do partial postback but my page loses its current scroll position and return scroll to top of the page. How should I maintain my page scroll position when I add new Item in my GridView.

Below is my screen output:

Below is my page code:

Aspx:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Invoice.aspx.cs" Inherits="RSMS.Users.Invoice" %>

<asp:UpdatePanel ID="upItemDetail" runat="server">
<ContentTemplate>
    <asp:GridView
        ID="gvItemDetail"
        runat="server"
        Width="100%"
        ShowHeaderWhenEmpty="true"
        AutoGenerateColumns="false"
        EmptyDataText="No Data Found!"
        ShowFooter="False"
        BorderStyle="None"
        CellPadding="3"
        GridLines="Horizontal"
        SkinID="AHGridView"
        OnRowCommand="gvItemDetail_RowCommand">
        <Columns>
            <asp:TemplateField HeaderText="Item ID">
                <ItemTemplate>
                    <asp:Label ID="lblItemID" runat="server" Text='<%# Eval("Item_ID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Item Name">
                <ItemTemplate>
                    <asp:Label ID="lblItemID" runat="server" Text='<%# Eval("Item_Name") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox
                        ID="txtItemName"
                        runat="server"
                        placeholder="Item Name"
                        CssClass="form-control"></asp:TextBox>
                    </div>
                <asp:HiddenField ID="hdnItemID" runat="server" Value="" ClientIDMode="Static" />
                    <div id="AutoCompleteItem"></div>
                    <%--<asp:RequiredFieldValidator
                    ID="rfvItemName"
                    runat="server"
                    ControlToValidate="txtItemName"
                    ErrorMessage="Item Name must be enter."
                    Display="None">
                </asp:RequiredFieldValidator>--%>
                    <ajaxToolkit:AutoCompleteExtender
                        ID="acetxtItemName"
                        runat="server"
                        ServiceMethod="GetItemID"
                        ServicePath="~/ApplicationWebService.asmx"
                        TargetControlID="txtItemName"
                        MinimumPrefixLength="1"
                        UseContextKey="false"
                        CompletionInterval="0"
                        EnableCaching="true"
                        CompletionSetCount="30"
                        FirstRowSelected="true"
                        CompletionListElementID="AutoCompleteItem"
                        OnClientItemSelected="ItemSelected">
                    </ajaxToolkit:AutoCompleteExtender>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:TextBox
                        ID="txtItemName"
                        runat="server"
                        placeholder="Item Name"
                        TabIndex="5"
                        CssClass="form-control"></asp:TextBox>
                    </div>
                <asp:HiddenField ID="hdnItemID" runat="server" Value="" ClientIDMode="Static" />
                    <div id="AutoCompleteItem"></div>
                    <%--<asp:RequiredFieldValidator
                    ID="rfvItemName"
                    runat="server"
                    ControlToValidate="txtItemName"
                    ErrorMessage="Item Name must be enter."
                    Display="None">
                </asp:RequiredFieldValidator>--%>
                    <ajaxToolkit:AutoCompleteExtender
                        ID="acetxtItemName"
                        runat="server"
                        ServiceMethod="GetItemID"
                        ServicePath="~/ApplicationWebService.asmx"
                        TargetControlID="txtItemName"
                        MinimumPrefixLength="1"
                        UseContextKey="false"
                        CompletionInterval="0"
                        EnableCaching="true"
                        CompletionSetCount="30"
                        FirstRowSelected="true"
                        CompletionListElementID="AutoCompleteItem"
                        OnClientItemSelected="ItemSelected">
                    </ajaxToolkit:AutoCompleteExtender>
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Sales Price">
                <ItemTemplate>
                    <asp:Label ID="lblItemSalesPrice" runat="server" Text='<%# Eval("Sale_Price") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox
                        ID="txtSalesPrice"
                        runat="server"
                        placeholder="Sales Price"
                        CssClass="form-control"></asp:TextBox>
                    <ajaxToolkit:FilteredTextBoxExtender ID="ftbeSalesPrice" runat="server"
                        TargetControlID="txtSalesPrice"
                        FilterType="Numbers"></ajaxToolkit:FilteredTextBoxExtender>
                    <%--<asp:RequiredFieldValidator
                    ID="rfvPrice"
                    runat="server"
                    ControlToValidate="txtPurchasePrice"
                    ErrorMessage="Purchase Price must be in numbers."
                    Display="None">
                </asp:RequiredFieldValidator>--%>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:TextBox
                        ID="txtSalesPrice"
                        runat="server"
                        placeholder="Sales Price"
                        Text='<%# Eval("Sale_Price") == null ? "0" : Eval("Sale_Price") %>'
                        TabIndex="6"
                        ClientIDMode="Static"
                        CssClass="form-control"></asp:TextBox>
                    <asp:HiddenField ID="hdnPurchase_Price" runat="server" ClientIDMode="Static" Value="0" />
                    <%--<ajaxToolkit:FilteredTextBoxExtender ID="ftbeSalesPrice" runat="server"
                    TargetControlID="txtSalesPrice"
                    FilterType="Numbers"></ajaxToolkit:FilteredTextBoxExtender>--%>
                    <%--<asp:RequiredFieldValidator
                    ID="rfvPurchasePrice"
                    runat="server"
                    ControlToValidate="txtPurchasePrice"
                    ErrorMessage="Purchase Price must be in numbers."
                    Display="None">
                </asp:RequiredFieldValidator>--%>
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Item QTY">
                <ItemTemplate>
                    <asp:Label ID="lblItemQTY" runat="server" Text='<%# Eval("Item_Qty") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox
                        ID="txtItemQuantity"
                        runat="server"
                        placeholder="Quantity"
                        CssClass="form-control"></asp:TextBox>
                    <ajaxToolkit:FilteredTextBoxExtender ID="ftbeQuantity" runat="server"
                        TargetControlID="txtItemQuantity"
                        FilterType="Numbers"></ajaxToolkit:FilteredTextBoxExtender>
                    <%--<asp:RequiredFieldValidator
                    ID="rfvQuantity"
                    runat="server"
                    ControlToValidate="txtItemQuantity"
                    ErrorMessage="Item Quantity must be enter in numbers."
                    Display="None">
                </asp:RequiredFieldValidator>--%>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:TextBox
                        ID="txtItemQuantity"
                        runat="server"
                        placeholder="Quantity"
                        Text='<%# Eval("Item_Qty") == null ? "0" : Eval("Item_Qty") %>'
                        TabIndex="7"
                        CssClass="form-control"></asp:TextBox>
                    <ajaxToolkit:FilteredTextBoxExtender ID="ftbeQuantity" runat="server"
                        TargetControlID="txtItemQuantity"
                        FilterType="Numbers"></ajaxToolkit:FilteredTextBoxExtender>
                    <%--<asp:RequiredFieldValidator
                    ID="rfvQuantity"
                    runat="server"
                    ControlToValidate="txtItemQuantity"
                    ErrorMessage="Item Quantity must be enter in numbers."
                    Display="None">
                </asp:RequiredFieldValidator>--%>
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="UOM">
                <ItemTemplate>
                    <asp:Label ID="lblUOM" runat="server" Text='<%# Eval("Item_UOM") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:DropDownList
                        ID="ddlUOM"
                        runat="server"
                        CssClass="ah-border-less"
                        AutoPostBack="true">
                        <asp:ListItem Selected="True" Value="0">Select UOM</asp:ListItem>
                        <asp:ListItem Value="1">GM</asp:ListItem>
                        <asp:ListItem Value="2">KG</asp:ListItem>
                        <asp:ListItem Value="3">PCS</asp:ListItem>
                        <asp:ListItem Value="4">DZ</asp:ListItem>
                        <asp:ListItem Value="5">BOX</asp:ListItem>
                    </asp:DropDownList>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:DropDownList
                        ID="ddlUOM"
                        runat="server"
                        TabIndex="8"
                        CssClass="ah-border-less">
                        <asp:ListItem Selected="True" Value="0">Select UOM</asp:ListItem>
                        <asp:ListItem Value="GM">GM</asp:ListItem>
                        <asp:ListItem Value="KG">KG</asp:ListItem>
                        <asp:ListItem Value="PCS">PCS</asp:ListItem>
                        <asp:ListItem Value="DZ">DZ</asp:ListItem>
                        <asp:ListItem Value="BOX">BOX</asp:ListItem>
                    </asp:DropDownList>
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Total Price">
                <ItemTemplate>
                    <asp:Label ID="lblTotalPrice" Text='<%# Eval("Total_Price") %>' runat="server"></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="lblTotalPrice" runat="server" Text='<%# Eval("Total_Price") == null ? "0" : Eval("Total_Price") %>'></asp:Label>
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <FooterTemplate>
                    <asp:LinkButton ID="itemAdd" ClientIDMode="AutoID" CommandName="Add" runat="server" TabIndex="9">Add</asp:LinkButton>
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</ContentTemplate>

Aspx.cs Code:

protected void gvItemDetail_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName.Equals("Add"))
    {
        HiddenField itemID = (HiddenField)gvItemDetail.FooterRow.FindControl("hdnItemID");
        HiddenField itemPurchasePrice = (HiddenField)gvItemDetail.FooterRow.FindControl("hdnPurchase_Price");
        TextBox itemName = (TextBox)gvItemDetail.FooterRow.FindControl("txtItemName");
        TextBox itemSalesPrice = (TextBox)gvItemDetail.FooterRow.FindControl("txtSalesPrice");
        TextBox itemQTY = (TextBox)gvItemDetail.FooterRow.FindControl("txtItemQuantity");
        DropDownList itemUOM = (DropDownList)gvItemDetail.FooterRow.FindControl("ddlUOM");
        Label itemTotalPrice = (Label)gvItemDetail.FooterRow.FindControl("lblTotalPrice");

        Decimal dcmTotalPrice = (Convert.ToDecimal(itemSalesPrice.Text.Trim()) * Convert.ToDecimal(itemQTY.Text.Trim()));
        Decimal dcmPurchasePrice = (Convert.ToDecimal(itemPurchasePrice.Value.Trim()) * Convert.ToDecimal(itemQTY.Text.Trim()));

        DataTable dt = (DataTable)HttpContext.Current.Session["dtInvoiceItemDetail"];
        //dt.Rows[0].Delete();
        dt.Rows.Add(itemID.Value.Trim(),
                itemName.Text.Trim(),
                itemSalesPrice.Text.Trim(),
                itemQTY.Text.Trim(),
                itemUOM.SelectedValue.ToString().Trim(),
                dcmTotalPrice,
                dcmPurchasePrice
                );
        dt.AcceptChanges();
        gvItemDetail.DataSource = dt;
        gvItemDetail.DataBind();
        gvItemDetail.Rows[0].Visible = false;
        HttpContext.Current.Session["dtInvoiceItemDetail"] = dt;
        lblCalculateTotal.Text = (Convert.ToDecimal(dt.AsEnumerable()
        .Sum(x => Convert.ToDecimal(x["Total_Price"])))).ToString();

        commission = ((Convert.ToDecimal(lblCalculateTotal.Text.Trim()) - Convert.ToDecimal(dt.AsEnumerable()
        .Sum(x => Convert.ToDecimal(x["Purchase_Price"])))) * 10) / 100;
    }
    gvItemDetail.FooterRow.Focus();
}

What I've tried:

Maintain Panel Scroll Position On Partial Postback ASP.NET

Re: Update Panel Scrolling Issue

Maintain Panel Scroll Position On Postback in ASP.NET

page jumps to top

how to retain browser scroll position for Dynamic Control Events

Answer 1

I've found my solution that when I remove gvItemDetail.FooterRow.Focus(); code my page maintain its scroll position. Thanks for all of your comments.

Answer 2

I face this issue before. My resolution is to add maintainScrollPositionOnPostBack="true" in the web.config file

<system.web>
    <compilation debug="true" targetFramework="4.5.2"/>
    <httpRuntime targetFramework="4.5.2"/>

    <pages maintainScrollPositionOnPostBack="true" /> //this will keep current position after postback

  </system.web>