DataGrid — Fixed group header overlaps group summary values when columnRenderingMode="virtual" (T1324988) (#33077)

Author: Raushen

packages/devextreme/js/__internal/grids/data_grid/summary/__tests__/m_summary.integration.test.ts

@@ -13,6 +13,72 @@ describe('Summary', () => {
   beforeEach(beforeTest);
   afterEach(afterTest);
 
+  describe('alignByColumn with virtual column rendering (T1324988)', () => {
+    const COLUMN_COUNT = 100;
+
+    const dynamicColumns = Array.from({ length: COLUMN_COUNT }, (_, i) => ({
+      dataField: `field${i}`,
+      width: 100,
+    }));
+
+    const columns = [
+      {
+        dataField: 'company', width: 100, fixed: true, fixedPosition: 'left' as const,
+      },
+      { dataField: 'state', width: 100, groupIndex: 0 },
+      ...dynamicColumns,
+    ];
+
+    const groupItems = dynamicColumns.map((col) => ({
+      column: col.dataField,
+      summaryType: 'sum' as const,
+      alignByColumn: true,
+    }));
+
+    const dataSource = [
+      {
+        id: 1,
+        company: 'Company A',
+        state: 'Arkansas',
+        ...Object.fromEntries(dynamicColumns.map((col, i) => [col.dataField, i])),
+      },
+    ];
+
+    it('group row cell colSpan should be 1 after horizontal scroll', async () => {
+      const { component } = await createDataGrid({
+        dataSource,
+        keyExpr: 'id',
+        width: 500,
+        showBorders: true,
+        columns,
+        summary: { groupItems },
+        scrolling: {
+          columnRenderingMode: 'virtual',
+        },
+      });
+
+      await flushAsync();
+
+      const beforeScrollCell = component.getDataCell(1, 3);
+      expect(beforeScrollCell.getText()).toBe('1');
+
+      const scrollContainer = component.getScrollableContainer();
+      scrollContainer.scrollLeft = 5000;
+      scrollContainer.dispatchEvent(new Event('scroll'));
+      await flushAsync();
+
+      expect(scrollContainer.scrollLeft).toBe(5000);
+
+      const afterScrollCell = component.getDataCell(1, 3);
+      expect(afterScrollCell.getText()).toBe('48');
+
+      const groupCells = component.getGroupRow(0).getCells();
+      const colSpan = Number(groupCells[1].getAttribute('colSpan')) || 1;
+
+      expect(colSpan).toBe(1);
+    });
+  });
+
   describe('column lookup map performance optimization (T1316562)', () => {
     const SUMMARY_COUNT = 100;
     const GROUP_COUNT = 4;

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

@@ -938,16 +938,23 @@ const rowsView = (Base: ModuleType<RowsView>) => class SummaryRowsViewExtender e
     }
   }
 
-  private _hasAlignByColumnSummaryItems(columnIndex, options) {
-    return !isDefined(options.columns[columnIndex].groupIndex) && options.row.summaryCells[columnIndex].length;
+  private _hasAlignByColumnSummaryItems(columnIndex, options): boolean {
+    const column = options.columns[columnIndex];
+    const isGrouped = isDefined(column.groupIndex);
+    const isVirtual = column.command === 'virtual';
+    const hasSummaryCells = !!options.row.summaryCells[columnIndex].length;
+    return !isGrouped && (isVirtual || hasSummaryCells);
   }
 
   private _getAlignByColumnCellCount(groupCellColSpan, options) {
     let alignByColumnCellCount = 0;
 
     for (let i = 1; i < groupCellColSpan; i++) {
       const columnIndex = options.row.summaryCells.length - i;
-      alignByColumnCellCount = this._hasAlignByColumnSummaryItems(columnIndex, options) ? i : alignByColumnCellCount;
+      const hasAlignBySummary = this._hasAlignByColumnSummaryItems(columnIndex, options);
+      if (hasAlignBySummary) {
+        alignByColumnCellCount = i;
+      }
     }
 
     return alignByColumnCellCount;

packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/model/grid_core.ts

@@ -22,6 +22,7 @@ const SELECTORS = {
   headerRowClass: 'dx-header-row',
   dataRowClass: 'dx-data-row',
   groupRowClass: 'dx-group-row',
+  scrollableContainer: 'dx-scrollable-container',
   aiDialog: 'dx-aidialog',
   aiPromptEditor: 'dx-ai-prompt-editor',
   toast: 'dx-toast',
@@ -105,6 +106,10 @@ export abstract class GridCoreModel<TInstance = GridBase | CardView> {
     return new GroupRowModel(this.getGroupRows()[rowIndex]);
   }
 
+  public getScrollableContainer(): HTMLElement {
+    return this.root.querySelector(`.${SELECTORS.scrollableContainer}`) as HTMLElement;
+  }
+
   public getHeaderByText(text: string): dxElementWrapper {
     return $(Array.from(this.getHeaderCells()).find((el) => $(el).text().includes(text)));
   }

packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/model/row/group_row.ts

@@ -15,4 +15,10 @@ export class GroupRowModel {
 
     return row.querySelector(`.${SELECTORS.expandCell}`) as HTMLElement;
   }
+
+  public getCells(): NodeListOf<HTMLElement> {
+    const row = this.getElement() as HTMLElement;
+
+    return row.querySelectorAll('td');
+  }
 }