locked
Error - The table must contain row sections in order of header, body, then footer. RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I am getting below error when i try to create extra header row

    The table  must contain row sections in order of header, body, then footer.
    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 
    
    Exception Details: System.Web.HttpException: The table  must contain row sections in order of header, body, then footer.
    
    Source Error: 
    
    
    Line 24:     <script src="<%=ResolveUrl("~/vendors/bootstrap/dist/js/bootstrap.min.js") %>"></script>
    Line 25:     <script src="../vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
    Line 26:     <script src="<%=ResolveUrl("~/vendors/datatables/jquery.dataTables.min.js") %>"></script>
    Line 27:     <script src="vendors/bootstrap/dist/js/bootstrap-multiselect.js"></script>
    Line 28:     <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
    
    
    
    protected void gvwCategories_OnRowCreated(object sender, GridViewRowEventArgs e)
            {
                            if (e.Row.RowType == DataControlRowType.Header)
                {
                    GridView HeaderGrid = (GridView)sender;
                    GridViewRow HeaderGridRow = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);
                    TableCell HeaderCell = new TableCell();
    
    
                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Sale";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);
    
                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Purchase";
                    HeaderCell.ColumnSpan = 1;
                    HeaderGridRow.Cells.Add(HeaderCell);
    
                    gvwCategories.Controls[0].Controls.AddAt(0, HeaderGridRow);
    
                }
            }
    
    
    
    <div class="table-responsive">
                    <asp:GridView ID="gvwCategories" OnPreRender="gvwCategories_PreRender" runat="server" 
                    CssClass="table table-bordered table-striped" AutoGenerateColumns="false" OnRowCommand="gvwCategories_RowCommand" OnRowCreated="gvwCategories_OnRowCreated" 
                    BorderWidth="1px"  BorderStyle="None" BorderColor="#DEBA84" HeaderStyle-CssClass="GridHeader" ClientIDMode="Static"
                    EmptyDataText="No Records Found!" EmptyDataRowStyle-ForeColor="Red" EmptyDataRowStyle-CssClass ="gvEmpty" >
                    <HeaderStyle ForeColor="White" Font-Bold="True" BackColor="#428bca"></HeaderStyle>
                    <Columns>
                        <asp:TemplateField HeaderText="Code">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="lblCode" Text='<%#Eval("Code") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Description">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="lblDescription" Text='<%#Eval("Description") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
    
                        <asp:TemplateField HeaderText="Action">
                            <ItemTemplate>
                                <asp:linkbutton id="btnEdit"  ToolTip="Update Record" CommandName="EditRow" CausesValidation="False" runat="server" CssClass="clslnkbutton"/> 
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    </asp:GridView>
                </div>
    
    
    $(document).ready(function () {
                $('#gvwCategories').dataTable({
                    "pageLength": 10,
                    order: [],
                    columnDefs: [ { orderable: false, targets: [2] } ]
                });
    
            });

    Thanks

    Tuesday, October 2, 2018 5:10 PM

All replies

  • User-271186128 posted

    Hi JagjitSingh,

    The table  must contain row sections in order of header, body, then footer.

    This issue is related to the dynamically added header row. Since, you want to use use JQuery DataTable plugin with GridView, I suggest you could append the custom header using JQuery, before attach the datatable plugin to the gridview, you could using preappend method to insert the header row.

    Code as below:

    Code behind:

            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    List<TestModel> itemlist = new List<TestModel>()
                    {
                        new TestModel(){ Code="Code A", Description="Desc A"},
                        new TestModel(){ Code="Code B", Description="Desc B"},
                        new TestModel(){ Code="Code C", Description="Desc C"},
                        new TestModel(){ Code="Code A", Description="Desc A"},
                        new TestModel(){ Code="Code B", Description="Desc B"},
                        new TestModel(){ Code="Code C", Description="Desc C"},
                        new TestModel(){ Code="Code A", Description="Desc A"},
                        new TestModel(){ Code="Code B", Description="Desc B"},
                        new TestModel(){ Code="Code C", Description="Desc C"},
                        new TestModel(){ Code="Code A", Description="Desc A"},
                        new TestModel(){ Code="Code B", Description="Desc B"},
                        new TestModel(){ Code="Code C", Description="Desc C"},
                    };
                    gvwCategories.DataSource = itemlist;
                    gvwCategories.DataBind();
    
                    if (gvwCategories.Rows.Count > 0)
                    {
                        //This replaces <td> with <th>    
                        gvwCategories.UseAccessibleHeader = true;
                        //This will add the <thead> and <tbody> elements    
                        gvwCategories.HeaderRow.TableSection = TableRowSection.TableHeader;
                        //This adds the <tfoot> element. Remove if you don't have a footer row    
                        //gvwCategories.FooterRow.TableSection = TableRowSection.TableFooter;
                    }
                }
            }
            protected void gvwCategories_RowCreated(object sender, GridViewRowEventArgs e)
            {
            }

    JQuery script:

        <script type="text/javascript">
            $(document).ready(function () {
                $('#gvwCategories >thead').prepend('<tr class="GridHeader" style="color:White;background-color:#428BCA;font-weight:bold;"><th colspan="2">Sale</th><th>Purchase</th></tr>');
    
                 $('#gvwCategories').dataTable({
                    "pageLength": 10,
                    order: [],
                    columnDefs: [ { orderable: false, targets: [2] } ]
                });
    
            });
        </script>

    the result as below:

    Best regards,
    Dillion

    Wednesday, October 3, 2018 2:55 AM
  • User-1499457942 posted

    Hi

      it is giving message - Uncaught TypeError: "#gvwCategories >thead".prepend is not a function

    Thanks

    Wednesday, October 3, 2018 6:12 AM
  • User-271186128 posted

    Hi JagjitSingh,

    it is giving message - Uncaught TypeError: "#gvwCategories >thead".prepend is not a function

    It seems that the issue is related to the JQuery reference, please try to use the following JQuery reference, it works well on my side.

        <link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" />
        <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
        <link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.7/css/responsive.bootstrap.min.css" />
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    If still not working, you could try to use other jquery method to add elements, such as: jQuery insertBefore() Method

    https://www.w3schools.com/jquery/html_insertbefore.asp

    https://www.w3schools.com/jquery/jquery_dom_add.asp

    Best regards,
    Dillion

    Wednesday, October 3, 2018 8:04 AM