Paging not working in asp.net gridview inside AJAX updatepanel

Question

Hi,

I have an asp.net gridview that is originally bound to a sqldatasource control, but when the user presses an external button, it instead gets the contents of a datatable rather than a SQLdatasource control. I therefore had to write code in the PageIndexChanging event of the gridview to allow for paging. My code is as follows:

Protected Sub gvEvents_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles gvEvents.PageIndexChanging

gvEvents.PageIndex = e.NewPageIndex

gvEvents.DataBind()

This worked beautifully until I added an AJAX update panel so the whole page wouldn't postback every time it paged, and paging stopped working. I debugged it and discovered that it is actually calling the PageIndexChanging event, but nothing is happening.

I searched the web and found a few people with the same problem, but their solutions did not work for me. There was one on this site whose problem was solved by the following:

In PageIndexchanging event, where you bind data to grid, make sure, data is again fetched from the DB

I don't know what that means; my data was being bound as demonstrated above. I have "enable paging" set to true and EnableSortingAndPagingCallbacks set to false.

I would really appreciate if someone can help me. I am including my markup for the updatepanel below. Thank you so much!

`

    <ContentTemplate>

             <asp:GridView ID="gvEvents" runat="server"  DataKeyNames = "intID"
    AutoGenerateColumns="False" AllowPaging="True" GridLines="None" CellPadding="10" 
                 ForeColor="#333333" PageSize="6" DataSourceID="defaultDS" >
                 <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />

            <Columns>
            <asp:TemplateField HeaderText="Date">
                   <ItemTemplate>
                    <!-- put code block inside label? To set the formatter to include year if 
                    it's next year? -->
                    <asp:Label ID="Label1" runat="server" 
                        Text = '<%# RepeatingMethods.DetermineOngoing(CType(Eval("dtmEventStartDate"), DateTime) , CType(Eval("dtmEventEndDate"), DateTime))%>'> </asp:Label>

                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
              <ItemTemplate>
              <asp:Label ID="Label4" runat="server" Text='<%# Eval("chvAgeRange")  %>'> </asp:Label> <br />
               <asp:Label ID="Label3" runat="server" Text= '<%# Eval("chvState")  %>'> </asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:HyperLinkField DataNavigateUrlFields="intId" 
                DataNavigateUrlFormatString="EventDetail.aspx?intId={0}" 
                DataTextField="chvEventName" />

                <asp:BoundField DataField="chvBriefDescription" HeaderText="Description" 
                    SortExpression="chvBriefDescription" />


        </Columns>
                 <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                 <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                 <AlternatingRowStyle BackColor="White" />

            <asp:Label ID="lblError" runat="server"></asp:Label>

<br />
</ContentTemplate>
</asp:UpdatePanel>`

Answer 1

In PageIndexchanging event, where you bind data to grid, make sure, data is again fetched from the DB I don't know what that means; my data was being bound as demonstrated above.

It means that you need to fetch your data again in your code behind page. You are using a SQLdatasource in your design/html page, so you need to remove that and use a SQL Connection, SQL Command, etc. to fetch your data and then set that as your control's datasource.

Something like below:

http://www.aspnettutorials.com/tutorials/database/db-grid-aspnet2-vb.aspx

Your code should look something like this

Protected Sub Page_Load(...)
   gvEvents.PageIndex = 0
   LoadData();// loads initial data
end sub

private sub LoadData()
 '' do your SQL Conn and Command here
 '' set your datasource of gridview here
end sub

Protected Sub gvEvents_PageIndexChanging(...) Handles gvEvents.PageIndexChanging
  gvEvents.PageIndex = e.NewPageIndex
  LoadData()
  gvEvents.DataBind()
end sub

Answer 2

Controls that Are Not Compatible with UpdatePanel Controls

The following ASP.NET controls are not compatible with partial-page updates, and are therefore not supported inside an UpdatePanel control:

GridView and DetailsView controls when their EnableSortingAndPagingCallbacks property is set to true. The default is false.

http://www.asp.net/Ajax/Documentation/Live/overview/UpdatePanelOverview.aspx

Answer 3

Just update the AJAX Panel after databind().

assume id of the Update Panel is AJAXPanel

Protected Sub gvEvents_PageIndexChanging(...) Handles gvEvents.PageIndexChanging             
     gvEvents.PageIndex = e.NewPageIndex
     LoadData()
     gvEvents.DataBind()
     // The below line refreshes the update panel..  
     AJAXPanel.Update()
end sub