locked
GridView PageIndexChange misbehaves, or misunderstanding? RRS feed

  • Question

  • User186656733 posted

    I have a GridView where each row is fairly tall because it contains images. Rows show correctly.  Because the rows are tall, it may take several page downs to see the last row.

    When I scroll down to the end of the page and see the last row, then click on the next page number, the data is loaded correctly, but the browser stays at the bottom of the page.

    To the best of my knowledge, I am using default behavior for GridView paging, i.e., other than loading data, I have not coded anything.

    Is there a way to get the browser to go back to the top of the page each time PageIndex number changes?

    Help most appreciated.

    Sunday, June 25, 2017 4:21 AM

All replies

  • User-707554951 posted

    Hi Saavik

    Are you set MaintainScrollPositionOnPostback="true" in your @ Page directive..

    Page.MaintainScrollPositionOnPostBack Property indicating whether to return the user to the same position in the client browser after postback

    <%@ Page Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostback="true" CodeBehind="GridView PageIndexChange misbehaves.aspx.cs" Inherits="CaseTest.GridView_PageIndexChange_misbehaves" %>

    So, you need to set it to false.

    Code:

    <%@ Page Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostback="true" CodeBehind="GridView PageIndexChange misbehaves.aspx.cs" Inherits="CaseTest.GridView_PageIndexChange_misbehaves" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server"  AllowPaging="true"  PageSize="50"  OnPageIndexChanging="GridView1_PageIndexChanging" >
                <Columns>             
                </Columns>
            </asp:GridView>
        </div>
        </form>
    </body>
    </html>

    Codebehind:

     protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    this.BindGrid();
                }
            }
    
            private void BindGrid()
            {
                string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
                using (SqlConnection con = new SqlConnection(constr))
                {
                    using (SqlCommand cmd = new SqlCommand("SELECT * FROM [Order Details]"))
                    {
                        using (SqlDataAdapter sda = new SqlDataAdapter())
                        {
                            cmd.Connection = con;
                            sda.SelectCommand = cmd;
                            using (DataTable dt = new DataTable())
                            {
                                sda.Fill(dt);
                                GridView1.DataSource = dt;
                                GridView1.DataBind();
                            }
                        }
                    }
                }
            }
    
            protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
            {
                GridView1.PageIndex = e.NewPageIndex;
                BindGrid();
            }

    Output screenshot as below:

    Best regard

    Cathy

    Monday, June 26, 2017 8:56 AM
  • User186656733 posted

    Cathy,

    Thank you for your suggestion.

    Unfortunately, nothing has changed.  If you'd like to see the behavior, go to http://Rigbee.me, scroll to the bottom and hit page 2.

    The behavior is the same across all the browsers I have tried.

    Help is most appreciated.

    Monday, June 26, 2017 11:02 PM
  • User186656733 posted

    I figured out, still no solution, but a workaround.

    UpdatePanel was the culprit.  Maybe there is something built into UpdatePanel that makes it stay at the same browser location.

    If I remove UpdatePanel, the browser goes to the top when PageIndex changes - but I lose the smooth change between pages.

    Anyone know if there is a way to direct UpdatePanel (or another way) to have the browser go back to the top after a PageIndexChange?

    Help most appreciated.

    Wednesday, June 28, 2017 5:24 AM
  • User-707554951 posted

    Hi Saavik

    If I remove UpdatePanel, the browser goes to the top when PageIndex changes - but I lose the smooth change between pages.

    would you please provide us with related code so that we could reproduce your problem and find solution easily;

    After you remove updatepanel, what will happed? "lose the smooth change between pages" means what?

    Best regard

    Cathy

    Wednesday, June 28, 2017 8:46 AM
  • User186656733 posted

    Thank you for your reply.

    I am sure you would not wish to go through hundreds of lines of code.  Here is the basics:

    <asp:UpdatePanel ID="EditUpdatePanel" runat="server">

           <ContentTemplate>

                   <asp:Panel ID="BPanel" runat="server" DefaultButton="UpdateBButton">

                              <asp:GridView ID="BGridView" runat="server" AutoGenerateColumns="False" DataKeyNames="BId" DataSourceID="BDataSource"

                                         OnDataBound="BGridView_DataBound" OnSelectedIndexChanged="BGridView_SelectedIndexChanged">

                                                <Columns>

                              .

                                                         <asp:TemplateField HeaderText="Image Path" SortExpression="BImagePath">

                                                                  <ItemTemplate>

                                                                               <asp:Image ID="BEntryImage" runat="server" ImageUrl='<%# Eval("BEntryImagePath") %>' BorderWidth="0px"

                                              AlternateText='<%# Eval("BEntryAltText") %>' CssClass="BEntryImage" />

                                                                 </ItemTemplate>

                                                       </Columns>

                                          </asp:GridView>

                           </asp:GridView>    

                  </asp:Panel>

       </ContentTemplate>

    </asp:UpdatePanel>

    Images are fairly big (height 600 or greater), so I may only see one record at a time.

    When I use UpdatePanel and click to go to next page, transition is very smooth while next page loads, but I see the bottom of the GridView, i.e., last record of the next page.  If I remove UpdatePanel click to go to next page, the browser "blinks", but goes to the top of the GridView - next page.

    Help is appreciated.

    Friday, July 7, 2017 4:27 PM