GridView not rendering inside UpdatePanel

Question

I am having an issue where I'm trying to display a GridView in an UpdatePanel. First of all, initial data is not displayed when using the GridView inside it, while when I remove the UpdatePanel the data is rendered and shown.

Second thing I am trying to do is to refresh the datagrid after inserting a record via Ajax. I am trying to use a click through javascript to do it but so far no results. This is my aspx page:

<asp:Panel ID='pSearchParams' runat="server">
                        <asp:ObjectDataSource ID="historyDataSource" runat="server"
                          TypeName="DataSourceAdapters.DataSourceAdapter"
                          SelectMethod="GetData">
                        </asp:ObjectDataSource>
                        <form runat="server" id="x">
                        <asp:ScriptManager
                          ID="ToolkitScriptManager1" runat="server" >
                        </asp:ScriptManager>
                        <ajax:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" OnLoad="UpdatePanel2_Load">
                          <ContentTemplate>
                              <div id="triggerDiv" style="display:none;">
                                <asp:Button ID="triggerButton" CausesValidation="false" runat="server" Text="" />
                              <div>
                            <asp:GridView ID="GridViewHistory" CssClass="GridStyle"
                                runat="server" AllowPaging="True" AllowSorting="True"
                                AutoGenerateColumns="False" CellPadding="10"
                                DataSourceID="historyDataSource"
                                ForeColor="#333333">
                                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                                <Columns>
                                    <asp:BoundField DataField="CalculationDate" HeaderText="Date" ReadOnly="True" SortExpression="CalculationDate" />
                                    <asp:BoundField DataField="RoughId" HeaderText="Rough ID" ReadOnly="True" SortExpression="RoughId" />
                                </Columns>
                                <RowStyle BackColor="#EFF3FB" />
                                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                                <AlternatingRowStyle BackColor="White" />
                            </asp:GridView>
                         </ContentTemplate>
                         <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="triggerButton" EventName="Click" />
                            <asp:PostBackTrigger ControlID="GridViewHistory" />
                        </Triggers>
                        </ajax:UpdatePanel>
                        </form>
                    </asp:Panel>

And the code behind:

protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(triggerButton);
    }


    [WebMethod]
    public static void InsertHistoryItem()
    {
            DataSourceAdapters.DataSourceAdapter adapter = new DataSourceAdapters.DataSourceAdapter();
            adapter.Insert();

        }


    }

    protected void UpdatePanel2_Load(object sender, EventArgs e)
    {
        stepcutCalculationHistoryDataSource.Select();
        GridViewStepcutCalculationHistory.DataBind();
        UpdatePanel2.Update();
    }

The odd thing is I see the request for UpdatePanel being done in the network tab of DevTools, and response being there but it is never rendered in html.

Answer 1

I fixed it. In the end it was an improperly closed div element causing the issues. I lost my sanity over it though.