issues with rowgroup - responsive combination

jeroenvangorkum

i think i found 2 bugs in RowGroup, when combined with Responsive.

if the grouping start and/ or end row contain only 1 table cell to span all columns, the colspan attribute for this cell is calculated by counting the columns.visible: true properties:

    /**
     * Get the number of columns that a grouping row should span
     * @private
     */
    _colspan: function ()
    {
        return this.s.dt.columns().visible().reduce( function (a, b) {
            return a + b;
        }, 0 );
    },

combined with Responsive however, any column with the visible: true property can be hidden by Responsive setting its style to display: none;. these columns should not be included in the count for colspan. i'm currently counting visible columns like this:

    /**
     * Get the number of columns that a grouping row should span
     * @private
     */
    _colspan: function ()
    {
        return this.s.dt.columns().visible()
            .reduce(function (count, value, index, api) {
                var result          = 0,
                    columnHeader    = $(api.columns(index).header());

                if (value === true) {

                    // column has the visible: true property,
                    // check if its node has css display: none
                    result = (columnHeader.is(':hidden')) ? 0 : 1;
                }
                return count + result;
            }, 0);

    },

when the number of really visible columns changes, the colspan attribute values for grouping start and/ or end rows must be updated:

    /**
     * Adjust column span when column visibility changes
     * @private
     */
    _adjustColspan: function ()
    {
        $( 'tr.'+this.c.className, this.s.dt.table().body() )
            .attr( 'colspan', this._colspan() );
    },

this writes the new colspan attribute to the tr element, but tr has no valid attribute colspan. also, on first draw, colspan was set on the (single) td element in the grouping start and/ or end row. that is the value to adjust. i'm using:

    /**
     * Adjust column span when column visibility changes
     * @private
     */
    _adjustColspan: function ()
    {
        $( 'tr.' + this.c.className + ' td:only-child', this.s.dt.table().body() )
            .attr( 'colspan', this._colspan() );
    },

note that i added the :only-child selector in case there are custom grouping start and/ or end rows, with - for example - subtotals for some columns in their own table cell. because RowGroup does not 'know' what is returned from endRender and startRender functions, it should not add colspan attributes at all.

finally, i think Integration with Responsive could mention in some way that, when you're using custom grouping start and/ or end rows with more than 1 table cell, you must manually match the visibility of these cells with the columns Responsive hides or shows.

unfortunately this is as complicated as it sounds. for example: i'm using group-end rows with a table cell (td) for every column that could be visible, and aggregated subtotals written to some of them from the endRender function.

to hide or show end row cells for columns that Responsive just made invisible or visible, i'm hooking in to the responsive-resize event:

    table.on('responsive-resize', function (event, datatable, columns) {
        // show/ hide group-end cells for columns that became visible/ invisible
        var activeColumns = {};

        activeColumns = columns.filter(function (value, index) {
            return (value === true || value === false) ? true : false;
        });

        $('tr.group-end').each(function () {

            $('td', this).css('display', function (index, value) {
                return activeColumns[index] ? '' : 'none';
            });
        });
    });

(context: DataTables 1.10.16, RowGroup 1.0.2, Responsive 2.2.0)

jeroenvangorkum

any news on this?

to summarize, i tried to show that RowGroup (1.0.2):

1. counts visible columns incorrectly when combined with Responsive,
2. adds the colspan attribute to the wrong element: TR. it already exists on TD, and should be replaced there.

Ledian

Hello has anyone managed to make this integration work?.

@jeroenvangorkum, thank you very much for your contribution, these adjustments work correctly for me,

but I can not get the columns hidden in the row of the group to be shown as a child of the row, just like the other rows in the table.

Can you give me an idea with this problem? Thank you.

colin

Hi @Ledian ,

You can use responsive.details.renderer to customise how you want the child information to be drawn. If this isn't working for you, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin