0

I have a GridView, implementing a bootstrap data table, inside an UpdatePanel and has two LinkButton (Open and Delete). when loaded

After clicking any of the LinkButtons, bootstrap data table does not work. after click linkbutton

Here is my code for GridView

<asp:UpdatePanel ID="upanelDocReq" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
      <h6>Uploaded Documents</h6>
      <div class="table-responsive">
         <asp:GridView ID="gvDocuments" DataKeyNames="DocReqID" 
            CssClass="table table-striped dt-responsive nowrap" runat="server"
            EmptyDataText="No document uploaded yet" AutoGenerateColumns="false">
            <Columns>
               <asp:TemplateField HeaderText="Action">
                  <ItemTemplate>
                     <asp:LinkButton ID="lbView" runat="server" 
                        CssClass="btn btn-primary"
                        OnClick="lbView_Click">Open</asp:LinkButton>
                     <asp:LinkButton ID="lbDelete" runat="server" 
                        CssClass="btn btn-danger"
                        OnClick="lbDelete_Click">Delete</asp:LinkButton>
                  </ItemTemplate>
                  <HeaderStyle />
                  <ItemStyle Width="130px"></ItemStyle>
               </asp:TemplateField>
               <asp:BoundField DataField="DocumentDesc" HeaderText="Document">
                  <HeaderStyle />
               </asp:BoundField>
               <asp:BoundField DataField="DateUploaded" HeaderText="Date Upload">
                  <HeaderStyle />
                  <ItemStyle Width="120px"></ItemStyle>
               </asp:BoundField>
            </Columns>
         </asp:GridView>
      </div>
   </ContentTemplate>
</asp:UpdatePanel>

Script

<script>
    $(document).ready(function() {
        $('#<%=gvDocuments.ClientID%>').prepend($("<thead></thead>")
            .append($("#<%=gvDocuments.ClientID%>")
            .find("tr:first")))
            .DataTable({
                responsive: true,
                order: [],
                searching: false,
                lengthChange: false,
                drawCallback: function(settings) {
                    var pagination = $(this).closest('.dataTables_wrapper')
                        .find('.dataTables_paginate');
                    pagination.toggle(this.api().page.info().pages > 1);
                }
            });
    });   
</script>

What I did is I added ScriptReferences on ScriptManager?

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true">
    <Scripts>
        <asp:ScriptReference Path="~/Content/bootstrap.min.css" />
        <asp:ScriptReference Path="~/Content/bootstrap.min.css" />
        <asp:ScriptReference Path="~/Content/bootstrap-grid.min.css" />
        <asp:ScriptReference Path="~/Content/bootstrap-reboot.min.css" />
        <asp:ScriptReference Path="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
        <asp:ScriptReference Path="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css" />
        <asp:ScriptReference Path="~/Scripts/jquery-3.4.1.min.js" />
        <asp:ScriptReference Path="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" />
        <asp:ScriptReference Path="~/Scripts/bootstrap.bundle.min.js" />
        <asp:ScriptReference Path="~/Scripts/bootstrap.min.js" />
        <asp:ScriptReference Path="~/Scripts/popper.min.js" />
        <asp:ScriptReference Path="~/Scripts/umd/popper.min.js" />
        <asp:ScriptReference Path="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" />
        <asp:ScriptReference Path="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js" />
        <asp:ScriptReference Path="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js" />
        <asp:ScriptReference Path="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js" />
    </Scripts>
</asp:ScriptManager>

But still, bootstrap data table not working.

wazz
  • 4,953
  • 5
  • 20
  • 34
Remar10
  • 1
  • 2
  • First try putting all those datatables.net links on the page, above your script, not in the ScriptManager to see if you can get it working. Figure out the ScriptManager after that. – wazz Jan 08 '21 at 03:35
  • you need to initialize on every updatepanel, look at this answer https://stackoverflow.com/questions/3341623/asp-net-updatepanel-in-gridview-jquery-datepicker/3341741#3341741 – Aristos Jan 08 '21 at 03:38
  • I was just doing some formatting and it looks like there are extra parentheses on the `.find` line. – wazz Jan 08 '21 at 03:46
  • Links are also in Head Section.. All works fine on page load.. It only happens when I clicked the LinkButton.. – Remar10 Jan 08 '21 at 04:55

0 Answers0