[Solved] DataTables warning: Non-table node initialisation (INPUT) in ASP.Net GridView

Last Reply 12 days ago By dharmendr

Posted 13 days ago

DataTables warning: Non-table node initialisation (INPUT). For more information about this error, please see http://datatables.net/tn/2

My code works perfectly well if i remove the check box.

my code

 If i remove the check box  the error disappears.

Please help fix the code 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("[id*=gvDetails]").DataTable({
                bLengthChange: true,
                lengthMenu: [[10, 30, -1], [10, 30, "All"]],
                bFilter: true,
                bSort: true,
                bPaginate: true
            });
        });
    </script>
    <form id="form1" runat="server">
        <table style="width: 100%;">
            <tr>
                <td class="style23">&nbsp;</td>
                <td class="style15">
                    <table class="display" align="center" border="1px" bordercolor="grey" style="width: 1050px">
                        <tr>
                            <td align="center" class="style20" style="font-size: large; color: #006699; font-family: Cambria; font-weight: bold;">
                                <table id="customGrid" class="display" style="width: 100%; height: 164px; color: #000080; background-color: #000099;">
                                    <tr>
                                        <td style="background-color: #FFFFFF" class="style140" align="center">
                                            <table style="width: 100%; height: 25px;">
                                                <tr>
                                                    <td>
                                                        <strong>VIEW /EDIT JOB</strong></td>
                                                    <td>&nbsp;</td>
                                                    <td align="right">
                                                        <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/del.jpg"
                                                            Width="72px" Height="19px" OnClick="ImageButton3_Click" OnClientClick="javascript:return Confirmationbox();" />
                                                        <asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/Images/dup.jpg"
                                                            Width="78px" Height="18px" />
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="style5" align="left" style="background-color: #FFFFFF">
                                            <br />
                                            <br />
                                            <asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="False"
                                                BackColor="White" BorderColor="#3366CC" BorderStyle="None"
                                                Font-Names="Century Gothic" Font-Size="XX-Small" DataKeyNames="id"
                                                Width="100%" Style="margin-bottom: 0px">
                                                <Columns>
                                                    <asp:TemplateField>
                                                        <ItemTemplate>
                                                            <asp:CheckBox ID="chkSelect" runat="server" />
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                    <asp:BoundField DataField="id" HeaderText="id" />
                                                    <asp:BoundField DataField="pid" HeaderText="pid" />
                                                    <asp:BoundField DataField="variant" HeaderText="variant" />
                                                    <asp:BoundField DataField="country" HeaderText="country" />
                                                    <asp:BoundField DataField="pack" HeaderText="pack" />
                                                    <asp:BoundField DataField="customer" HeaderText="customer" />
                                                    <asp:BoundField DataField="jobnumber" HeaderText="jobnumber" />
                                                    <asp:BoundField DataField="artworkdate" HeaderText="artworkdate" />
                                                    <asp:BoundField DataField="reprodate" HeaderText="reprodate" />
                                                    <asp:BoundField DataField="artworknumber" HeaderText="artworknumber" />
                                                    <asp:BoundField DataField="templateno" HeaderText="templateno" />
                                                    <asp:HyperLinkField DataNavigateUrlFields=""
                                                        DataNavigateUrlFormatString="CustomerDetails.aspx?Id={0}"
                                                        Text="View" />
                                                    <asp:HyperLinkField DataNavigateUrlFields="Id"
                                                        DataNavigateUrlFormatString="CustomerDetails.aspx?Id={0}"
                                                        Text="Edit" />
                                                </Columns>
                                                <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
                                                <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
                                                <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
                                                <RowStyle BackColor="White" ForeColor="#003399" />
                                                <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
                                                <SortedAscendingCellStyle BackColor="#EDF6F6" />
                                                <SortedAscendingHeaderStyle BackColor="#0D4AC4" />
                                                <SortedDescendingCellStyle BackColor="#D6DFDF" />
                                                <SortedDescendingHeaderStyle BackColor="#002876" />
                                            </asp:GridView>
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <asp:Label ID="lblRecord" runat="server"></asp:Label>
                                            <br />
                                            <br />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
                <td></td>
            </tr>
        </table>
    </form>

 

public partial class JobsV : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindUserDetails();
        }
    }
    protected void BindUserDetails()
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(" SELECT id, pid, description, variant, country, pack, customer, jobnumber, artworkdate, reprodate, artworknumber, templateno, printtype FROM job ORDER BY id DESC", con))
            {
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    gvDetails.DataSource = dt;
                    gvDetails.DataSource = dt;
                    gvDetails.DataBind();
                }
            }
        }

        //Required for jQuery DataTables to work.
        gvDetails.UseAccessibleHeader = true;
        gvDetails.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
    //for get record
    protected void ImageButton3_Click(object sender, ImageClickEventArgs e)
    {
        foreach (GridViewRow gvrow in gvDetails.Rows)
        {
            //Finiding checkbox control in gridview for particular row
            CheckBox chkdelete = (CheckBox)gvrow.FindControl("chkSelect");
            //Condition to check checkbox selected or not
            if (chkdelete.Checked)
            {
                //Getting UserId of particular row using datakey value
                int usrid = Convert.ToInt32(gvDetails.DataKeys[gvrow.RowIndex].Value);
                using (SqlConnection con = new SqlConnection("data source=NEW\\PRESS01; Initial Catalog=NOW;Integrated Security=True;"))
                {
                    con.Open();
                    SqlCommand cmd = new SqlCommand("delete from Job where id=" + usrid, con);
                    cmd.ExecuteNonQuery();
                    con.Close();
                }
            }
        }
        BindUserDetails();
    }
}

 

Posted 12 days ago

Hi lingers,

When you use id*=gvDetails selector there are multiple controls found and datatable plugin tries to applied to all the elements.

So use class selector instead of id selector.

Refer below code.

HTML

<table style="width: 100%;">
    <tr>
        <td class="style23">&nbsp;</td>
        <td class="style15">
            <table class="display" align="center" border="1px" bordercolor="grey" style="width: 1050px">
                <tr>
                    <td align="center" class="style20" style="font-size: large; color: #006699; font-family: Cambria; font-weight: bold;">
                        <table id="customGrid" class="display" style="width: 100%; height: 164px; color: #000080; background-color: #000099;">
                            <tr>
                                <td style="background-color: #FFFFFF" class="style140" align="center">
                                    <table style="width: 100%; height: 25px;">
                                        <tr>
                                            <td>
                                                <strong>VIEW /EDIT JOB</strong></td>
                                            <td>&nbsp;</td>
                                            <td align="right">
                                                <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/del.jpg"
                                                    Width="72px" Height="19px" OnClick="ImageButton3_Click" OnClientClick="javascript:return Confirmationbox();" />
                                                <asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/Images/dup.jpg"
                                                    Width="78px" Height="18px" />
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td class="style5" align="left" style="background-color: #FFFFFF">
                                    <br />
                                    <br />
                                    <asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="False"
                                        BackColor="White" BorderColor="#3366CC" BorderStyle="None"
                                        Font-Names="Century Gothic" Font-Size="XX-Small" DataKeyNames="id"
                                        Width="100%" Style="margin-bottom: 0px" CssClass="grid">
                                        <Columns>
                                            <asp:TemplateField>
                                                <ItemTemplate>
                                                    <asp:CheckBox ID="chkSelect" runat="server" />
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                            <asp:BoundField DataField="id" HeaderText="id" />
                                            <asp:BoundField DataField="pid" HeaderText="pid" />
                                            <asp:BoundField DataField="variant" HeaderText="variant" />
                                            <asp:BoundField DataField="country" HeaderText="country" />
                                            <asp:BoundField DataField="pack" HeaderText="pack" />
                                            <asp:BoundField DataField="customer" HeaderText="customer" />
                                            <asp:BoundField DataField="jobnumber" HeaderText="jobnumber" />
                                            <asp:BoundField DataField="artworkdate" HeaderText="artworkdate" />
                                            <asp:BoundField DataField="reprodate" HeaderText="reprodate" />
                                            <asp:BoundField DataField="artworknumber" HeaderText="artworknumber" />
                                            <asp:BoundField DataField="templateno" HeaderText="templateno" />
                                            <asp:HyperLinkField DataNavigateUrlFields=""
                                                DataNavigateUrlFormatString="CustomerDetails.aspx?Id={0}"
                                                Text="View" />
                                            <asp:HyperLinkField DataNavigateUrlFields="Id"
                                                DataNavigateUrlFormatString="CustomerDetails.aspx?Id={0}"
                                                Text="Edit" />
                                        </Columns>
                                        <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
                                        <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
                                        <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
                                        <RowStyle BackColor="White" ForeColor="#003399" />
                                        <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
                                        <SortedAscendingCellStyle BackColor="#EDF6F6" />
                                        <SortedAscendingHeaderStyle BackColor="#0D4AC4" />
                                        <SortedDescendingCellStyle BackColor="#D6DFDF" />
                                        <SortedDescendingHeaderStyle BackColor="#002876" />
                                    </asp:GridView>
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <br />
                                    <asp:Label ID="lblRecord" runat="server"></asp:Label>
                                    <br />
                                    <br />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
        <td></td>
    </tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
    $(".grid").DataTable({
        bLengthChange: true,
        lengthMenu: [[10, 30, -1], [10, 30, "All"]],
        bFilter: true,
        bSort: true,
        bPaginate: true
    });
});
</script>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindUserDetails();
    }
}
protected void BindUserDetails()
{


    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter("SELECT id, pid, description, variant, country, pack, customer, jobnumber, artworkdate, reprodate, artworknumber, templateno, printtype FROM job ORDER BY id DESC", con))
        {
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                gvDetails.DataSource = dt;
                gvDetails.DataSource = dt;
                gvDetails.DataBind();
            }
        }
    }

    //Required for jQuery DataTables to work.
    gvDetails.UseAccessibleHeader = true;
    gvDetails.HeaderRow.TableSection = TableRowSection.TableHeader;
}
//for get record
protected void ImageButton3_Click(object sender, ImageClickEventArgs e)
{
    foreach (GridViewRow gvrow in gvDetails.Rows)
    {
        //Finiding checkbox control in gridview for particular row
        CheckBox chkdelete = (CheckBox)gvrow.FindControl("chkSelect");
        //Condition to check checkbox selected or not
        if (chkdelete.Checked)
        {
            //Getting UserId of particular row using datakey value
            int usrid = Convert.ToInt32(gvDetails.DataKeys[gvrow.RowIndex].Value);
            using (SqlConnection con = new SqlConnection("data source=NEW\\PRESS01; Initial Catalog=NOW;Integrated Security=True;"))
            {
                con.Open();
                SqlCommand cmd = new SqlCommand("delete from Job where id=" + usrid, con);
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
    }
    BindUserDetails();
}