kartik-v / yii2-grid

Enhanced GridView with various utilities for Yii Framework 2.0
http://demos.krajee.com/grid
Other
557 stars 302 forks source link

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

Closed KirkHicks closed 2 years ago

KirkHicks commented 2 years ago

Prerequisites

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: image

Expanded display after expanding following row: image

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

Operating System

Libraries

Isolating the problem

stale[bot] commented 2 years ago

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 commented 2 years ago

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 GitHubhttps://github.com/kartik-v/yii2-grid/issues/995#issuecomment-1008189264, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AMLHDHN3XXNRPFKS4RJN5LDUVDGLRANCNFSM5EC2H57Q. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://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: @.***>