Gridview paging in ModalPopupExtender strange behaviour

Question

I have a modalpopypextender that contains a grid view and I want populate it on button click which does this:

protected void btnViewRecipients_Click(object sender, EventArgs e)
{
    ModalPopupExtender1.Show();
    BindData();
}

Which is straight forward. BindData does this:

protected void BindData()
{
    try
    {
        SqlCommand sqlCommand = new SqlCommand();

        string connectionString = "Data Source=SERVER\\DB1;Initial Catalog=Survey;User ID=abcde;Password=12345;";

        using (SqlConnection sqlConnection = new SqlConnection(connectionString))
        {
            sqlCommand = sqlConnection.CreateCommand();

            sqlCommand.CommandText = "Select * From [Survey].[dbo].[data]";

            SqlDataAdapter sda = new SqlDataAdapter(sqlCommand.CommandText, connectionString);

            SqlCommandBuilder scb = new SqlCommandBuilder(sda);

            //Create a DataTable to hold the query results.

            //Fill the DataTable.
            sda.Fill(dTable);

            //Set the DataGridView DataSource.
            gvRecords.DataSource = dTable;
            gvRecords.DataBind();

            sqlConnection.Close();
        }
    }
    catch (SqlException ex)
    {
        //Console.WriteLine(ex.StackTrace);
    }
}

Now this all works good and I get to see the grid with data. I then turned on autopaging and went ahead to create the call gvRecords_PageIndexChanged. I have also turned on EnableSortingAndPagingCallbacks.

protected void gvRecords_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    gvRecords.PageIndex = e.NewPageIndex;
    gvRecords.DataSource = dTable;
    gvRecords.DataBind();
}

This kinda works very strangely. I noticed that when I click a page number, the table becomes blank and shows me EmptyDataText that I defined earlier. But when I close the ModalPopupExtender and open it again (clicking the button again) it shows me the right page and data! e.g. if I clicked page 3, then get a blank table, now reopening the MPE will show me page 3's contents in a gridview. I guess that's the viewstate stored somewhere but why is it that the gridview will not show me the page right away?

I am really stuck at this and failing to understand what I'm missing!

Any help appreciated million times, I have searched and searched online for this but maybe it is so trivial and obvious that no one has ever needed to ask!?!

Answer 1

I got it working finally, I have had to set PopupControlID to upModal, the updatepanel's ID, as opposed to the inner panel. The targetcontrolID also had to point to a hidden button, as many have found you must when working with MPEs...

Anyway, here goes:

    <asp:Button ID="hiddenButton" runat="server" Text="" style="display:none;" />
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" Enabled="True" TargetControlID="hiddenButton" PopupControlID="upModal" BehaviorID="modalbehavior" BackgroundCssClass="modalBackground"  OnCancelScript="cancelClick();" CancelControlID="closePopup">
    </ajaxToolkit:ModalPopupExtender>

    <asp:UpdatePanel runat="server" ID="upModal" UpdateMode="Conditional">
        <ContentTemplate>

            <asp:Panel id="pnlPopup" runat="server" class="ModalPanel" >

                <table cellpadding="5" cellspacing="5" class="topBanner" style="width:100%;">
                    <tr>
                        <td width="50">
                            <asp:LinkButton ID="closePopup" runat="server" onclick="LinkButton1_Click" CssClass="ClosePopupCls">Close 
                            [x]</asp:LinkButton>
                        </td>
                        <td align="center">
                            <asp:Label ID="lbl" runat="server" Text="Status"></asp:Label>
                        </td>
                        <td width="25">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <asp:GridView ID="gvRecords" runat="server" AllowPaging="True" 
                                BackColor="White" EmptyDataText="No Record Found" 
                                EnableSortingAndPagingCallbacks="True" ForeColor="GrayText" Height="600" 
                                onpageindexchanging="gvRecords_PageIndexChanging" Width="800">
                            </asp:GridView>
                        </td>
                    </tr>
                </table>
            </asp:Panel>

        </ContentTemplate>
    </asp:UpdatePanel>

Answer 2

Edited I've been working with Modals, UpdatePanels and ListViews for years, we'll solve this, but it would be good to see the entire markup.

From your comments I'd suggest;

1. Put your entire modal markup in the UpdatePanel. Make sure to set the ID and UpdateMode to conditional;

   <asp:UpdatePanel ID="upModal" runat="server" UpdateMode="Conditional">
      <ContentTemplate>      
      </ContentTemplate>
   </asp:UpdatePanel>
   

2. I usually use an ASP:Panel as my DIV inside my update panel;

   <asp:Panel ID="pnlPopup" runat="server" CssClass="ModalPanel">
   

3. Then place your GridView (or in my case ListView) in your panel

4. In your code behind after you call your gvRecords.Databind(), call upModal.Update()

   protected void gvRecords_PageIndexChanging(object sender, GridViewPageEventArgs e)
   {
      gvRecords.PageIndex = e.NewPageIndex;
      gvRecords.DataSource = dTable;
      gvRecords.DataBind();
      upModal.Update();
   }