DataGrid: Fix duplicate summary groups with alignByColumn enabled for grouped column with showWhenGrouped enabled (T1300738) (#30992)

Co-authored-by: Alyar <>

Author: Alyar666

e2e/testcafe-devextreme/tests/dataGrid/common/etalons/group-summary-when-grouped-column-has-showWhenGrouped.png

@@ -146,3 +146,53 @@ test('Group footer navigation should work without keyboard trap', async (t) => {
     ],
   },
 }));
+
+test('The group summary should be displayed next to the grouped value when the grouped column has the showWhenGrouped option enabled', async (t) => {
+  // arrange, act
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  // assert
+  await t
+    .expect(dataGrid.isReady())
+    .ok()
+    .expect(await takeScreenshot('group-summary-when-grouped-column-has-showWhenGrouped.png', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    {
+      id: 1, value1: 1, value2: 2, value3: 3,
+    },
+    {
+      id: 2, value1: 4, value2: 5, value3: 6,
+    },
+    {
+      id: 3, value1: 7, value2: 8, value3: 9,
+    },
+    {
+      id: 4, value1: 10, value2: 11, value3: 12,
+    },
+  ],
+  columns: [
+    'id',
+    'value1',
+    'value2',
+    {
+      dataField: 'value3',
+      groupIndex: 0,
+      showWhenGrouped: true,
+    },
+  ],
+  summary: {
+    groupItems: [
+      {
+        column: 'value3',
+        summaryType: 'count',
+        displayFormat: '{0} VALUE3 GROUP COUNT',
+        alignByColumn: true,
+      },
+    ],
+  },
+}));

e2e/testcafe-devextreme/tests/dataGrid/common/summary.ts

@@ -23,6 +23,7 @@ import type { RowsView } from '../../grid_core/views/m_rows_view';
 import AggregateCalculator from '../m_aggregate_calculator';
 import gridCore from '../m_core';
 import dataSourceAdapterProvider from '../m_data_source_adapter';
+import { getSummaryCellIndex } from './utils';
 
 const DATAGRID_TOTAL_FOOTER_CLASS = 'dx-datagrid-total-footer';
 const DATAGRID_SUMMARY_ITEM_CLASS = 'dx-datagrid-summary-item';
@@ -538,10 +539,12 @@ const data = (Base: ModuleType<DataController>) => class SummaryDataControllerEx
         }
       }
     });
+
     if (!isEmptyObject(summaryCellsByColumns)) {
       visibleColumns.forEach((column, visibleIndex) => {
         const prevColumn = visibleColumns[visibleIndex - 1];
-        const columnIndex = isGroupRow && (prevColumn?.command === 'expand' || column.command === 'expand') ? prevColumn?.index : column.index;
+        const columnIndex = getSummaryCellIndex(column, prevColumn, isGroupRow);
+
         summaryCells.push(summaryCellsByColumns[columnIndex] || []);
       });
     }

packages/devextreme/js/__internal/grids/data_grid/summary/m_summary.ts

@@ -0,0 +1,20 @@
+import { isDefined } from '@js/core/utils/type';
+import type { Column } from '@ts/grids/grid_core/columns_controller/m_columns_controller';
+
+export function getSummaryCellIndex(
+  column: Column,
+  prevColumn?: Column,
+  isGroupRow = false,
+): number {
+  const cellIndex = column.index ?? -1;
+
+  if (!isGroupRow) {
+    return cellIndex;
+  }
+
+  if (prevColumn?.type === 'groupExpand' || column.type === 'groupExpand') {
+    return prevColumn?.index ?? -1;
+  }
+
+  return !isDefined(column.groupIndex) ? cellIndex : -1;
+}

packages/devextreme/js/__internal/grids/data_grid/summary/utils.ts

@@ -84,6 +84,9 @@ import {
 
 export interface Column extends ColumnBase {
   parseValue: (text: string) => unknown;
+  index?: number;
+  groupIndex?: number;
+  type?: string;
 }
 
 export class ColumnsController extends modules.Controller {

packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts

@@ -3318,6 +3318,59 @@ const moduleConfig = {
             });
         });
 
+        // T1300738
+        QUnit.test('Grouping - 1 level & 3 columns - col_3.showWhenGrouped: true, summary_col_3.alignByColumn: true', function(assert) {
+            const done = assert.async();
+            const ds = [
+                { f1: 'f1_1', f2: 'f2_1', f3: 'f3_1' },
+            ];
+            const dataGrid = $('#dataGrid').dxDataGrid({
+                columns: [
+                    { dataField: 'f1', caption: 'f1', width: 100 },
+                    { dataField: 'f2', caption: 'f2', width: 150 },
+                    { dataField: 'f3', caption: 'f3', width: 200, groupIndex: 0, showWhenGrouped: true }
+                ],
+                summary: {
+                    groupItems: [
+                        {
+                            column: 'f3',
+                            summaryType: 'count',
+                            displayFormat: '{0} F3 GROUP COUNT',
+                            alignByColumn: true,
+                        }
+                    ]
+                },
+                dataSource: ds,
+                showColumnHeaders: false,
+                loadingTimeout: null
+            }).dxDataGrid('instance');
+
+            const expectedCells = [
+                [
+                    { excelCell: { value: 'f3: f3_1 (1 F3 GROUP COUNT)', alignment: alignLeftTopNoWrap, font: { bold: true } }, gridCell: { rowType: 'group', groupIndex: 0, column: dataGrid.columnOption(2), value: 'f3_1', groupSummaryItems: [{ name: undefined, value: 1 }] } },
+                    { excelCell: { value: null }, gridCell: { value: undefined, rowType: 'group', groupIndex: 0, column: dataGrid.columnOption(1) } },
+                    { excelCell: { value: null }, gridCell: { value: undefined, rowType: 'group', groupIndex: 0, column: dataGrid.columnOption(2) } },
+                ], [
+                    { excelCell: { value: 'f1_1', alignment: alignLeftTopNoWrap }, gridCell: { rowType: 'data', data: ds[0], column: dataGrid.columnOption(0) } },
+                    { excelCell: { value: 'f2_1', alignment: alignLeftTopNoWrap }, gridCell: { rowType: 'data', data: ds[0], column: dataGrid.columnOption(1) } },
+                    { excelCell: { value: 'f3_1', alignment: alignLeftTopNoWrap }, gridCell: { rowType: 'data', data: ds[0], column: dataGrid.columnOption(2) } },
+                ]
+            ];
+
+            helper._extendExpectedCells(expectedCells, topLeft);
+
+            exportDataGrid(getOptions(this, dataGrid, expectedCells)).then((cellRange) => {
+                helper.checkRowAndColumnCount({ row: 2, column: 3 }, { row: 2, column: 3 }, topLeft);
+                helper.checkAutoFilter(autoFilterEnabled, null);
+                helper.checkCellStyle(expectedCells);
+                helper.checkValues(expectedCells);
+                helper.checkMergeCells(expectedCells, topLeft);
+                helper.checkOutlineLevel([0, 1], topLeft.row);
+                helper.checkCellRange(cellRange, { row: 2, column: 3 }, topLeft);
+                done();
+            });
+        });
+
         [true, false].forEach((masterDetailEnabled) => {
             QUnit.test(`Grouping - 1 level - 1 summary group node, masterDetail.enabled: ${masterDetailEnabled}`, function(assert) {
                 const done = assert.async();