Display problem in grid with grouping in ExpandRowColumn detail section of parent grid

[KirkHicks]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of yii2-grid.
• This is not an usage question. I confirm having gone through and read the documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. Create a gridview displaying multiple rows containing an ExpandRowColumn.
2. Create the detail of these rows containing a separate gridview using group=true.
3. Expand one row, displaying the grid with grouped data.
4. Expand another row after the expanded row.

Expected behavior and actual behavior

When I follow those steps, I see... The data in the previously displayed detail grid is shifted around incorrectly. Exactly how depends on the specific grouping being done.

I was expecting... No change in the detail grid in the previously expanded row.

The problem seems to be that the rowspan on all previous displayed grouped table cells is incremented. I have tracked it down to enh #689 to fix issue #609 in version 3.1.6, which increments the rowspan to correct a slightly different expandrow with grouping issue. Removing that code or altering it to not use "prevAll()" to include all previous rows eliminates this problem, but I do not know how it may affect other usages of expandrow with grouping. The inclusion of all previous sibling rows is not precisely the problem, either. It is the "find('td[rowspan]')" which finds the grouped rows in all detail grids expanded from those rows that is causing this specific issue.

This is the code in kv-grid-expand.js (currently starting at lines 254 and 289) :

                // needed when used together with grouping
                var $rowsBefore = $row.prevAll(), expandRowPosition = $row.index() + 1;
                $rowsBefore.push($row);
                $.each($rowsBefore, function (i, tr) {
                    var $rowSpanTds = $(tr).find('td[rowspan]');
                    $.each($rowSpanTds, function (j, td) {
                        var rowSpan = parseInt($(td).attr('rowspan'));
                        if ($(tr).index() + rowSpan > expandRowPosition) {
                            $(td).attr('rowspan', rowSpan + 1);
                        }
                    });
                });
...
                    // needed when used together with grouping
                    var $rowsBefore = $row.prevAll();
                    $rowsBefore.push($row);
                    var expandRowPosition = $row.index() + 1;
                    $.each($rowsBefore, function (i, tr) {
                        var $rowSpanTds = $(tr).find('td[rowspan]');
                        $.each($rowSpanTds, function (j, td) {
                            var rowSpan = parseInt($(td).attr('rowspan'));
                            if ($(tr).index() + rowSpan > expandRowPosition) {
                                $(td).attr('rowspan', rowSpan - 1);
                            }
                        });
                    });

Original expanded display:

Expanded display after expanding following row:

Notice that each grouped cell becomes one row taller, which shifts the other cells around incorreclty. The HTML is altered by incrementing the "rowspan" value.

<tr class="gridRole16" data-key="0">
    <td class="gridRole16 kv-grid-group kv-group-even" data-col-seq="1" data-group-key="0e1738f1" data-odd-css="kv-group-odd" data-even-css="kv-group-even" rowspan="3">prog</td>
    <td class="gridRole16 kv-grid-group kv-group-even" data-col-seq="2" data-group-key="5326ebe6" data-odd-css="kv-group-odd" data-even-css="kv-group-even" data-sub-group-of="1" rowspan="3">site</td>
    <td class="gridRole16 kv-grid-group kv-group-even" data-col-seq="3" data-group-key="aaa95ad5" data-odd-css="kv-group-odd" data-even-css="kv-group-even" data-sub-group-of="2" rowspan="3">AIDApps</td>
    <td class="gridRole16 kv-grid-group kv-group-even" data-col-seq="4" data-group-key="e78e8a91" data-odd-css="kv-group-odd" data-even-css="kv-group-even" data-sub-group-of="3">division</td>
    <td class="gridRole16 kv-grid-group kv-group-even" data-col-seq="5" data-group-key="babf5986" data-odd-css="kv-group-odd" data-even-css="kv-group-even" data-sub-group-of="4">*</td>
</tr>

<tr class="gridRole16" data-key="0">
    <td class="gridRole16 kv-grid-group kv-group-even" data-col-seq="1" data-group-key="0e1738f1" data-odd-css="kv-group-odd" data-even-css="kv-group-even" rowspan="4">prog</td>
    <td class="gridRole16 kv-grid-group kv-group-even" data-col-seq="2" data-group-key="5326ebe6" data-odd-css="kv-group-odd" data-even-css="kv-group-even" data-sub-group-of="1" rowspan="4">site</td>
    <td class="gridRole16 kv-grid-group kv-group-even" data-col-seq="3" data-group-key="aaa95ad5" data-odd-css="kv-group-odd" data-even-css="kv-group-even" data-sub-group-of="2" rowspan="4">AIDApps</td>
    <td class="gridRole16 kv-grid-group kv-group-even" data-col-seq="4" data-group-key="e78e8a91" data-odd-css="kv-group-odd" data-even-css="kv-group-even" data-sub-group-of="3">division</td>
    <td class="gridRole16 kv-grid-group kv-group-even" data-col-seq="5" data-group-key="babf5986" data-odd-css="kv-group-odd" data-even-css="kv-group-even" data-sub-group-of="4">*</td>
</tr>

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version:
• yii2-grid version: 3.3.6 (likely since 3.1.6, enh#389)

Isolating the problem

• This bug happens on the demos page
• The bug happens consistently across all tested browsers
• This bug happens when using yii2-grid without other plugins.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[KirkHicks]

This issue has had no further activity because there has been no response to the originally reported problem which still exists in exactly the same form. The next activity is expected from the developer. Closing it automatically makes no sense while the originally reported problem still exists and has not been addressed at all. From: stale[bot] ***@***.***> Sent: Saturday, January 8, 2022 06:05 PM To: kartik-v/yii2-grid ***@***.***> Cc: Kirk Hicks ***@***.***>; Author ***@***.***> Subject: Re: [kartik-v/yii2-grid] Display problem in grid with grouping in ExpandRowColumn detail section of parent grid (#995) This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. — Reply to this email directly, view it on GitHub<#995 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AMLHDHN3XXNRPFKS4RJN5LDUVDGLRANCNFSM5EC2H57Q>. Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you authored the thread.Message ID: ***@***.***>