Inserting a Datatable into a child row duplicates rowGroup headers

Loren Maxwell

I'm reporting as a bug, although it may be something in the code I've written that I can't figure out.

At any rate, I get duplicated row groups headers with 1) rowGroup in effect, 2) opening a child row, 3) inserting a datatable inside the child row.

Here's an example: https://ghsfha.org/w/1985_GHSA_Class_AAAA_football_season#Regions

To duplicate, click on the down-caret next to "Lowndes" (or any team in a table with row groups). The child row opens and the datatable is inserted, but each of the row group headers in that table are inserted again. Click the up-caret to close the child row, the added row group header remains. Click the down-caret once more and the group row will be inserted yet again.

Again, maybe it's in the code I wrote, but I need some help here . . .

Loren Maxwell

Also, this seems similar to an issue reported here with Search Panes:
https://datatables.net/forums/discussion/61517/parent-child-with-searchpane-panes-duplicating-on-hide-show

allan

No question that there is something going wrong there - and its a bit of a beauty! What is happening is that the inner DataTable is triggering its own draw event - but that bubbles up through the document, so in fact the outer table sees a draw event as well - even although it doesn't belong to it.

RowGroup doesn't have any logic to stop itself from reacting to a draw that is not from the host table, thus it draws the headers again.

I've just committed a fix and it will be in the nightly build in a few minutes.

Thanks for the detailed report and test case.

Allan

Loren Maxwell

Thanks, @allen. I've implemented the below workaround to basically check if rowGroup exists and if so then disable and enable on showing the child row. It happens so quick that everything looks fine visibility.

Workaround

.on("click", "td.child-row-trigger", function() {
    var tr = $(this).closest("tr");
    var row = table.row(tr);

    if (row.child.isShown()) {
        table_destroy_child_row(row);
        tr.removeClass("shown");
    } else {
        table_create_child_row(row);
        tr.addClass("shown");

        /* WORKAROUND BELOW */

        if (table.rowGroup()) {
            table.rowGroup().disable().draw();
            table.rowGroup().enable().draw();
        }

    }
})

I tried to use rowGroup().enabled() until I realized it was for RowGroup 1.1.2:
https://datatables.net/reference/api/rowGroup().enabled()

Anyway, the documentation says "Gat the enabled state for RowGroup."

allan

Oops - thanks for pointing out the typo. Fixed in git and will be pushed to the site soon.

Regards,
Allan