Search code examples
javascriptasp.netupdatepanel

Maintain horizontal Scroll Bar position of a gridview inside a DIV after a PostBack ASP.NET

I have a grid-view that is very long. I want to maintain the scroll position on postback. I have tried many solution on stack overflow but know worked for me.

Here is my gridview

<div class="largeGridScroll">
           <asp:GridView ID="gvInventario" runat="server" AutoGenerateColumns="false"  AllowSorting="true" ShowFooter="false" DataKeyNames="componente_id, ubicacion_id, proveedor_id"  PageSize="10"
                ShowHeaderWhenEmpty="true" AllowPaging="True" OnRowEditing="gvInventario_RowEditing" OnRowCancelingEdit="gvInventario_RowCancelingEdit" OnPageIndexChanging="gridView_PageIndexChanging" 
                 CellPadding="3"  AllowColumResize="True" onsorting="grdDetails_Sorting" GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">    
                <Columns>
                </Columns>
            </asp:GridView>
            </div>

Here is the code for the buttons I want to prevent the scroll bar from resting

        <asp:Button class="btn btn-primary" ID="btnConfirmPurchases" runat="server" Text="Validar" AutoPostback="true" width="20%"  OnClick="Add_location_Click" /> 
            <asp:Button class="btn btn-primary"  ID="Button1" runat="server" Text="Validar" OnClick="Confirm_purchase_order_Click"  />
  <asp:Button class="btn btn-primary" ID="btnShowPurchaseOrder" runat="server" Text="Comprar" AutoPostback="false" OnClientClick="return ShowModalPopup(); return false;" OnClick="view_purchases_click" />     

                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:ImageButton ImageUrl="~/Images/edit.png" runat="server" CommandName="Edit" ToolTip="Edit" Width="20px" Height="20px"/>
                           <%-- <asp:ImageButton ImageUrl="~/Images/shopping.png" runat="server" class="button" ToolTip="Shopping" Width="20px" Height="20px" />--%>
                            <a class="button" href="#popup1" ><img src="../images/shopping.png" width="20" height="20"/></a>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:ImageButton ImageUrl="~/Images/save.png" runat="server" ToolTip="Update" Width="20px" Height="20px" OnClick="updateOcurencia"/>
                            <asp:ImageButton ImageUrl="~/Images/cancel.png" runat="server" CommandName="Cancel" ToolTip="Cancel" Width="20px" Height="20px"/>
                        </EditItemTemplate>
                    </asp:TemplateField>

Here is the css.

.largeGridScroll 
{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

Here is visualy where my gridview looks like. image of grid

When I press on one of the buttons I do not want to lose my scroll position just like on the picture. I have tried using javascript and updatepanel but with no success since all the tutorial have vertical scroll and not horizontal like mine. Any help would be appreciated thank you.

Solution

  • I foud the ansser here https://www.webcodeexpert.com/2015/09/how-to-maintain-scroll-position-of-html.html I only needed to change some small things to make it horrizontal Here is my css

    .largeGridScroll 
{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

    Here is my javascript

     $(document).ready(function () {
    maintainScrollPosition();
});

function pageLoad() {
    maintainScrollPosition();
}

function setScrollPosition(scrollValue) {
    $('#<%=hfScrollPosition.ClientID%>').val(scrollValue);
}

function maintainScrollPosition() {
    $("#dvScroll").scrollLeft($('#<%=hfScrollPosition.ClientID%>').val());
}

    Here is my aspx

     <asp:HiddenField ID="hfScrollPosition" Value="0" runat="server" />
    <div  id="dvScroll" class="largeGridScroll" onscroll="setScrollPosition(this.scrollLeft);">