Uncaught TypeError: Cannot read property 'mData' of undefined for JQuery DataTable

Question

I have bound my datatable to my gridview in ASP.Net. I Have tried to use jQuery dataTable to show search and sorting options in my gridview, but the datatable throws me an error.

The Error is: Uncaught TypeError: Cannot read property 'mData' of undefined" this is the error.

I have used the below code:

function pageLoad(sender, args) {
    $('#grdProducts').DataTable(
        $(document).ready(function () {
            $('.dataTable').dataTable();
        })
    );
}

<asp:GridView ID="grdProducts" runat="server" AutoGenerateColumns="false" CssClass="table table-hover dataTable">
    <Columns>
         <asp:TemplateField Visible="false">
            <ItemTemplate>
                <asp:Label ID="lblProductID" runat="server"                        Text='<%# Eval("ProductID")%>' />
            </ItemTemplate>
        </asp:TemplateField>
        <%--<asp:BoundField DataField="GroupName" HeaderText="Group Name" />--%>
        <asp:BoundField DataField="BrandID" HeaderText="Brand" />
        <asp:BoundField DataField="ProductName" HeaderText="Product" />
        <asp:BoundField DataField="ShortCode" HeaderText="Code " />
        <asp:BoundField DataField="Price" HeaderText="Price" />
        <asp:TemplateField HeaderText="Update">
            <ItemTemplate>
                <asp:Button ID="btnUpdate" runat="server" Text="Update" class="btn btn-info" OnClick="btnUpdate_OnClick" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Answer 1

By default ASP GridView keeps everything under tag and will not render grid header under , which will result in 'mData' error.

In order to do so, use below line after binding data to GridView:

GridViewName.HeaderRow.TableSection = TableRowSection.TableHeader;