Paging not working in asp.net gridview inside AJAX updatepanel

Question

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!

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ibtnSearch" />           
        </Triggers>

        <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" />


<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White"></FooterStyle>

<PagerStyle HorizontalAlign="Center" BackColor="#FFCC66" ForeColor="#333333"></PagerStyle>

<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy"></SelectedRowStyle>

<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White"></HeaderStyle>

<AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
    </asp:GridView>



                <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

For anyone who stumbles across this issue, I encountered it this AM and this post was misleading (atleast for my scenario). For me, I simply had to add a PageIndexChanging Event as a trigger for my datagrid for the updatepanel trigger's, and it resolved my issue.

Answer 3

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 4

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