[Solved] Page does not scroll to Top after UpdatePanel PostBack in ASP.Net

rashidnk
 
on Jun 10, 2022 06:52 AM
366 Views

Hi Team

I am always looking for solutions to my all queries on this website. 9 out of 10 times I got exactly what I'm looking for.

Now my issue is paging in listview control while using the UpdatePanel.

When users click on page 2/3/4.. on the bottom of the page. The next set of the record comes, but the page view still shows the bottom of the page instead of the 1st row of the next record set.

Could you please solve my problem? So I can set the page view always 1st row on each page.

I bound my ListView after this line of code. 

 protected void OnPagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
    {
        (lvFeatured.FindControl("DataPager1") as DataPager).SetPageProperties(e.StartRowIndex, e.MaximumRows, false);

 

<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
    <ContentTemplate>
        <div class="row">
            <asp:ListView ID="lvFeatured" runat="server" OnItemCommand="lvFeatured_ItemCommand"
                GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1" OnPagePropertiesChanging="OnPagePropertiesChanging"
                EmptyDataText="No Record Found" EmptyDataRowStyle-CssClass="RowStyle" RepeatLayout="Table" EnableViewState="true">
                <LayoutTemplate>
                    <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
                    <div class="bedroom-pagination">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li>
                                    <asp:DataPager ID="DataPager1" runat="server" PagedControlID="lvFeatured" PageSize="20">
                                        <Fields>
                                            <asp:NumericPagerField CurrentPageLabelCssClass="page-link" ButtonCount="10" NextPageText=">>" PreviousPageText="<<" />
                                        </Fields>
                                    </asp:DataPager>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </LayoutTemplate>
                <EmptyDataTemplate>
                    <table id="Table1" runat="server">
                        <tr>
                            <td>No data found.</td>
                        </tr>
                    </table>
                </EmptyDataTemplate>
                <GroupTemplate>
                    <tr>
                        <td runat="server" id="itemPlaceholder1" valign="top" />
                    </tr>
                </GroupTemplate>
                <ItemTemplate>
                    <div class="col-md-3 col-6">
                        <div class="single-new-product category-new-product">
                            <div class="product-img">
                                <a href="single-product.aspx?pc=<%#Eval("ProductId")%>">
                                    <img src="<%#Eval("ThumbImg") %>" class="first_img" alt="" />
                                </a>
                                <div class="new-product-action2 category-cart">
                                    <asp:LinkButton runat="server" ID="imgBtnAddCart" class="MuiButtonBase-root MuiIconButton-root like-btn"
                                        CommandArgument='<%#Eval("ProductId")+","+Eval("ProductName")+","+ 1 +","+ Eval("RegularPrice")+","+ Eval("SellingPrice")+","+Eval("ThumbImg")+","+ Eval("Size")%>'
                                        CommandName="AddToCart"></asp:LinkButton>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <a href="single-product.aspx?pc=<%#Eval("ProductId")%>">
                                    <h3>
                                        <%#Eval("ProductName") %></h3>
                                </a>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:ListView>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
Mudassar
 
on Jun 14, 2022 01:44 AM

You need to add this code so that after UpdatePanel refresh it scrolls back to TOP.

<script type="text/javascript" language="javascript">
 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args)
    {
       scrollTo(0,0);
    }
</script>