Inserting a Datatable into a child row duplicates rowGroup headers

Inserting a Datatable into a child row duplicates rowGroup headers

Loren MaxwellLoren Maxwell Posts: 382Questions: 93Answers: 10
edited April 2020 in Bug reports

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 . . .

This question has an accepted answers - jump to answer

Answers

  • Loren MaxwellLoren Maxwell Posts: 382Questions: 93Answers: 10

    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

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    edited April 2020 Answer ✓

    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 MaxwellLoren Maxwell Posts: 382Questions: 93Answers: 10
    edited April 2020

    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."

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

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

    Regards,
    Allan

This discussion has been closed.