Linkbutton in grid (inside updatepanel) does not bind the grid in modal bootstrap ASP.NET C#

See more:

C#

ASP.NET

Javascript

bootstrap

Hi,

I am having a problem binding the gridview inside a modal, the binding occurs in the OnClick event of linkbutton in the header of another gridview.

Here's my first gridview with the linkbutton (lnkHistory) in the header

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
       <ContentTemplate>
           <div class="tab-content">
               <div role="tabpanel" class="tab-pane active" id="currentsa">
                   <div class="row">
                       <div class="col-sm-12">
                           <asp:GridView runat="server" ID="gvSalaryAdvance" Width="100%" CssClass="table table-hover" AutoGenerateColumns="false"
                               OnRowCreated="gvSalaryAdvance_RowCreated">
                               <Columns>
                                   <asp:TemplateField ItemStyle-Width="15%">
                                       <HeaderTemplate>
                                           <asp:Label ID="lblStatus" runat="server" Text="Status"></asp:Label>
                                           <asp:LinkButton ID="lnkHistory" runat="server" OnClick="lnkHistory_Click"><span class="glyphicon glyphicon-exclamation-sign"></span></asp:LinkButton>
                                       </HeaderTemplate>
                                       <ItemTemplate>
                                           <asp:Label ID="lblStatus" runat="server" Text='<%# Eval("StatusStr") %>'></asp:Label>
                                       </ItemTemplate>
                                   </asp:TemplateField>
                               </Columns>
                           </asp:GridView>
                       </div>
                   </div>
       </ContentTemplate>
   </asp:UpdatePanel>

Here's the gridview I bind after clikcing the lnkHistory button

div id="modalSAHistory" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" data-focus="true" aria-labelledby="myLargeModalLabel" style="margin-top: 80px" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">History</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <asp:GridView runat="server" ID="gvHistory" Width="100%" CssClass="table table-striped table-bordered table-hover" AutoGenerateColumns="false">
                                    <Columns>
                                        <asp:TemplateField HeaderText="Status" ItemStyle-Width="15%">
                                            <ItemTemplate>
                                                <asp:Label ID="lblStatus" runat="server" Text='<%# Eval("StatusStr") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Marked By" ItemStyle-Width="25%">
                                            <ItemTemplate>
                                                <asp:Label ID="lblModifiedBy" runat="server" Text='<%# Eval("ModifiedBy") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Here's the OnClick event of lnkHistory inside the first gridview

protected void lnkHistory_Click(object sender, EventArgs e)
    {
        string said = "";
        DataTable dt = new DataTable();
        if (gvSalaryAdvance.Rows.Count > 0)
        {
            foreach (GridViewRow gvRow in gvSalaryAdvance.Rows)
            {
                if (gvRow.RowType == DataControlRowType.DataRow)
                {
                    HiddenField hdnSAID = (HiddenField)gvRow.FindControl("hdnSAID");
                    said = hdnSAID.Value;
                    
                    
                }
            }
            string[] param = { "@SA_ID" };
            string[] val = { said };
            dt = SharedClass.getTableParam("[sp_SA_getSalaryAdvanceLogs]", param, val);
            gvHistory.DataSource = dt;
            gvHistory.DataBind();
        }
        ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "AA", "$('#modalSAHistory').modal('show');", true);
    }

What I have tried:

I also set the lnkHistory as postbacktrigger using the RowCreated event of gridview

protected void gvSalaryAdvance_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            ScriptManager scriptMan = ScriptManager.GetCurrent(this);
            LinkButton btn = e.Row.FindControl("lnkHistory") as LinkButton;

            if (btn != null)
            {
                scriptMan.RegisterAsyncPostBackControl(btn);
            }
        }
    }

The modal opens but it does not have data, i tried to breakpoint on the code of binding. It retrieves the data and puts it in the datatable and binds it to the gridview inside the modal but the modal is empty.