How to make jquery datatable work after updatepanel postback

Question

1.00/5 (1 vote)

See more:

I have tried all possible solutions to solve this issue but still i'm not able to fix,
Please help me.

I have tried to use pageload script, adding script into contenttemplage, registerclient or startup script, using pagre pre render, but nothing is working

This is my .cs code:

C#

protected void GridView1_PreRender(object sender, EventArgs e)
      {
          this.BindGrid();

          if (GridView1.Rows.Count > 0)
          {
              //This replaces <td> with <th> and adds the scope attribute
              GridView1.UseAccessibleHeader = true;

              //This will add the <thead> and <tbody> elements
              GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

              //This adds the <tfoot> element.
              //Remove if you don't have a footer row
              GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
          }

      }

and this is my asp.net code:

ASP.NET

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
    //On Page Load
    $(function () {
        $('.gvv').dataTable();
    });

    //On UpdatePanel Refresh
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                $('.gvv').dataTable();
            }
        });
    };
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <asp:ScriptManager runat="server" ID="ScriptManager1" />
<asp:UpdatePanel ID="upCrudGrid" runat="server">
            <ContentTemplate>
                <br />
                <asp:Button ID="btnAdd" runat="server" Text="Add New Record" CssClass="btn btn-info"
                    OnClick="btnAdd_Click" />
                <br />
                <br />
                <div class="box span12">
                    <div class="box-content">
                        <asp:GridView ID="GridView1" runat="server" HorizontalAlign="Center" OnRowCommand="GridView1_RowCommand"
                            AutoGenerateColumns="false" DataKeyNames="ContainerSizeID" CssClass="table table-striped table-bordered bootstrap-datatable datatable"
                            OnPreRender="GridView1_PreRender">
                            <Columns>
                                <asp:BoundField DataField="ContainerSizeID" HeaderText="ContainerSizeID" Visible="false" />
                                <asp:BoundField DataField="ContainerSize1" HeaderText="Container Size" />
                                <asp:TemplateField HeaderText="Actions">
                                    <ItemTemplate>
                                        <asp:LinkButton ID="btnViewDetail" runat="server" CommandName="detail" CssClass="btn btn-success"></asp:LinkButton>
                                        <asp:LinkButton ID="btnDelete" runat="server" CommandName="deleteRecord" CssClass="btn btn-danger">^__i class="icon-trash"></asp:LinkButton>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </div>
                </div>
            </ContentTemplate>
            <Triggers>
            </Triggers>
        </asp:UpdatePanel>
</asp:Content>

Posted 2-May-15 7:14am

User 5149409

Updated 6-Dec-16 22:29pm

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 3-May-15 1:29am

Have you debugged inside the endRequest event?

ShahidRiaz 4-May-15 6:33am

You have not assigned class "gvv" to your Grid View. That is why its not working. Add a class gvv to your gridView and it should start working. However you still need to use enrequest so that everything works properly after partial page post back

Uthixo 8-Sep-15 21:30pm

HI Mina, I'm on the same problem, you did solve? Help me. Sorry for my english, I only speak Spanish.

[no name] 15-Jan-16 13:28pm

I have same issue, did you find the solution?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

ssbalakumar · Answer 1 · 2016-12-06T22:28:00

aspx Code:

ASP.NET

<asp:updatepanel runat="server" id="ad">
                            <contenttemplate>
                                <div class="panel-heading">
                                    <asp:button id="btnAdd" runat="server" text="Add New User" onclick="Add" class="btn btn-success pull-right mr15"></asp:button></div>
                                <div class="panel-body">
                                <asp:gridview id="gvHRM" runat="server" autogeneratecolumns="False" datakeynames="intUserId" onprerender="gvHRM_PreRender" cssclass="table table-striped table-hover">
                                    <columns>
                                        <asp:boundfield datafield="varUserRole" headertext="User Roles" sortexpression="varUserRole"></asp:boundfield>
                                        <asp:boundfield datafield="varUserName" headertext="User Name" sortexpression="varUser">
                                        <asp:boundfield datafield="varPwd" headertext="Password" sortexpression="varPassword">
                                        <asp:templatefield headertext="Valid On"> 
                                        </asp:templatefield>
                                        <asp:templatefield headertext="">
                                            <itemtemplate>
                                                <asp:button id="btnDetail" runat="server" text="Details" onclick="Detail" commandargument="<%# Eval("intUserId") %>" <!--="" newline="" --="">                                                    class="btn btn-primary" />
                                            </asp:button></itemtemplate>
                                        </asp:templatefield>
                                        <asp:templatefield headertext="">
                                            <itemtemplate>
                                                <asp:button id="btnEdit" runat="server" text="Edit" onclick="Edit" commandargument="<%# Eval("intUserId") %>" <!--="" newline="" --="">                                                    class="btn btn-primary" />
                                            </asp:button></itemtemplate>
                                        </asp:templatefield>
                                        <asp:templatefield headertext="">
                                            <itemtemplate>
                                                <asp:button id="btnDelete" runat="server" text="Delete" onclick="Delete" commandargument="<%# Eval("intUserId") %>" <!--="" newline="" --="">                                                    class="btn btn-danger" />
                                            </asp:button></itemtemplate>
                                        </asp:templatefield>
                                    </asp:boundfield></asp:boundfield></columns>
                                </asp:gridview>
                                </div>
                            </contenttemplate>
                        </asp:updatepanel>

On cs page, first prerender Table Header, Footer on page init.

C#

protected void gvHRM_PreRender(object sender, EventArgs e)
    {
        gvHRM.UseAccessibleHeader = false;
        gvHRM.HeaderRow.TableSection = TableRowSection.TableHeader;
        gvHRM.FooterRow.TableSection = TableRowSection.TableFooter;
        int CellCount = gvHRM.FooterRow.Cells.Count;
        gvHRM.FooterRow.Cells.Clear();
        gvHRM.FooterRow.Cells.Add(new TableCell());
        gvHRM.FooterRow.Cells[0].ColumnSpan = CellCount - 1;
        gvHRM.FooterRow.Cells[0].HorizontalAlign = HorizontalAlign.Right;
        gvHRM.FooterRow.Cells.Add(new TableCell());

        TableFooterRow tfr = new TableFooterRow();
        for (int i = 0; i < CellCount; i++)
        {
            tfr.Cells.Add(new TableCell());
        }
        gvHRM.FooterRow.Controls[1].Controls.Add(tfr);
    }

The id for the gridview generated as

HTML

dashboard_gvHRM

so that we use dashboard_gvHRM as a id in the js file,

JavaScript

<blockquote class="quote"><div class="op">Quote:</div>$(function () {
    var table = $('#dashboard_gvHRM').DataTable({
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
        lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
        stateSave: true,
        dom: "<'row be-datatable-header'<'col-sm-3'l><'col-sm-4'B><'col-sm-5'f>><'row be-datatable-body'<'col-sm-12'tr>><'row be-datatable-footer'<'col-sm-5'i><'col-sm-7'p>>"
    });
    });</blockquote>

and for update panel render call it as,