Paging not working in asp.net gridview inside AJAX updatepanel - asp.net

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