GridCore: make expand column header rowspan equal to rows count (T1317623)

e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/visual.ts

@@ -314,3 +314,73 @@ test('The grid layout should be correct after unfixing a column via the context
     { dataField: 'State' },
   ],
 }));
+
+// T1317623
+test('Expand columns headers offsets should be correct with fixed band columns and fixed command columns (T1317623)', async (t) => {
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await testScreenshot(t, takeScreenshot, 'T1317623-expand-columns-with-band-columns.png', { element: dataGrid.element });
+
+  await dataGrid.scrollTo(t, { x: 5000 });
+
+  await testScreenshot(t, takeScreenshot, 'T1317623-horizontal-scroll-with-fixed-band-columns.png', { element: dataGrid.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    {
+      ID: 1,
+      CompanyName: 'Super Mart of the West',
+      Address: '702 SW 8th Street',
+      City: 'Bentonville',
+      State: 'Arkansas',
+      Zipcode: 72716,
+      Phone: '(800) 555-2797',
+      Fax: '(800) 555-2171',
+    },
+    {
+      ID: 2,
+      CompanyName: 'K&S Music',
+      Address: '1000 Nicllet Mall',
+      City: 'Minneapolis',
+      State: 'Minnesota',
+      Zipcode: 55403,
+      Phone: '(612) 304-6073',
+      Fax: '(612) 304-6074',
+    },
+  ],
+  keyExpr: 'ID',
+  width: '100%',
+  showBorders: true,
+  columnWidth: 200,
+  columnFixing: { enabled: true },
+  selection: { mode: 'multiple' },
+  grouping: { autoExpandAll: true },
+  masterDetail: {
+    enabled: true,
+  },
+  columns: [
+    {
+      caption: 'Company Info',
+      fixed: true,
+      fixedPosition: 'left',
+      columns: [
+        { dataField: 'CompanyName', groupIndex: 1, showWhenGrouped: true },
+        { dataField: 'Phone' },
+        { dataField: 'Fax' },
+      ],
+    },
+    'City',
+    {
+      dataField: 'State',
+      groupIndex: 0,
+    },
+    'Address',
+    'Zipcode',
+  ],
+}));

packages/devextreme/js/__internal/grids/data_grid/keyboard_navigation/m_column_keyboard_navigation_mixin.ts

@@ -1,6 +1,6 @@
 import { isCommandKeyPressed } from '@js/common/core/events/utils';
 import { isDefined } from '@js/core/utils/type';
-import type { Column } from '@ts/grids/grid_core/columns_controller/m_columns_controller';
+import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import type { FocusedCellPosition } from '@ts/grids/grid_core/keyboard_navigation/const';
 import { KEY_CODES } from '@ts/grids/grid_core/keyboard_navigation/const';
 import type { ColumnKeyboardNavigationController } from '@ts/grids/grid_core/keyboard_navigation/m_column_keyboard_navigation_core';

packages/devextreme/js/__internal/grids/data_grid/keyboard_navigation/m_group_panel_keyboard_navigation.ts

@@ -5,7 +5,7 @@ import {
 } from '@js/common/core/events/utils/index';
 import $ from '@js/core/renderer';
 import { hiddenFocus } from '@js/ui/shared/accessibility';
-import type { Column } from '@ts/grids/grid_core/columns_controller/m_columns_controller';
+import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import { Direction } from '@ts/grids/grid_core/keyboard_navigation/const';
 import { ColumnKeyboardNavigationController } from '@ts/grids/grid_core/keyboard_navigation/m_column_keyboard_navigation_core';
 import type { Views } from '@ts/grids/grid_core/m_types';

packages/devextreme/js/__internal/grids/data_grid/keyboard_navigation/m_headers_keyboard_navigation.ts

@@ -1,7 +1,7 @@
 import { isCommandKeyPressed } from '@js/common/core/events/utils';
 import $ from '@js/core/renderer';
 import { isDefined } from '@js/core/utils/type';
-import type { Column } from '@ts/grids/grid_core/columns_controller/m_columns_controller';
+import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import { KEY_CODES } from '@ts/grids/grid_core/keyboard_navigation/const';
 import type { HeadersKeyboardNavigationController } from '@ts/grids/grid_core/keyboard_navigation/m_headers_keyboard_navigation';
 import { headersKeyboardNavigationModule } from '@ts/grids/grid_core/keyboard_navigation/m_headers_keyboard_navigation';

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

@@ -1,5 +1,5 @@
 import { isDefined } from '@js/core/utils/type';
-import type { Column } from '@ts/grids/grid_core/columns_controller/m_columns_controller';
+import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 
 export function getSummaryCellIndex(
   column: Column,

packages/devextreme/js/__internal/grids/grid_core/adaptivity/m_adaptivity.ts

@@ -19,7 +19,8 @@ import { isMaterial } from '@js/ui/themes';
 import type { ResizingController } from '@ts/grids/grid_core/views/m_grid_view';
 
 import type { ExportController } from '../../data_grid/export/m_export';
-import type { Column, ColumnsController } from '../columns_controller/m_columns_controller';
+import type { ColumnsController } from '../columns_controller/m_columns_controller';
+import type { Column } from '../columns_controller/types';
 import type { ColumnsResizerViewController, DraggingHeaderViewController } from '../columns_resizing_reordering/m_columns_resizing_reordering';
 import type { DataController } from '../data_controller/m_data_controller';
 import type { EditingController } from '../editing/m_editing';

packages/devextreme/js/__internal/grids/grid_core/column_headers/m_column_headers.ts

@@ -11,7 +11,7 @@ import { ColumnContextMenuMixin } from '@ts/grids/grid_core/context_menu/m_colum
 import type { HeaderFilterController } from '@ts/grids/grid_core/header_filter/m_header_filter';
 import type { HeaderPanel } from '@ts/grids/grid_core/header_panel/m_header_panel';
 
-import type { Column } from '../columns_controller/m_columns_controller';
+import type { Column } from '../columns_controller/types';
 import { CLASSES as REORDERING_CLASSES } from '../columns_resizing_reordering/const';
 import type { HeadersKeyboardNavigationController } from '../keyboard_navigation/m_headers_keyboard_navigation';
 import { registerKeyboardAction } from '../m_accessibility';

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

@@ -0,0 +1,227 @@
+import {
+  afterEach, beforeEach, describe, expect, it,
+} from '@jest/globals';
+
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid,
+} from '../__tests__/__mock__/helpers/utils';
+
+const dataSource = [
+  { id: 1, name: 'Item 1' },
+  { id: 2, name: 'Item 2' },
+  { id: 3, name: 'Item 3' },
+];
+
+describe('Column Controller', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  describe('Expand columns in band columns layout', () => {
+    it('detail expand column header should have rowspan equal to header row count when band columns are used', async () => {
+      const { instance } = await createDataGrid({
+        dataSource,
+        columns: [
+          { caption: 'Band column 1', columns: ['id', 'name'] },
+          { dataField: 'name', caption: 'Column 3', name: 'Column3' },
+        ],
+        masterDetail: {
+          enabled: true,
+        },
+      });
+
+      const columnsController = instance.getController('columns');
+      const rowCount = columnsController.getRowCount();
+      const firstRowColumns = columnsController.getVisibleColumns(0);
+
+      expect(rowCount).toBe(2);
+
+      const expandColumn = firstRowColumns.find((col) => col.command === 'expand');
+      expect(expandColumn).toBeDefined();
+      expect(expandColumn.rowspan).toBe(2);
+    });
+
+    it('should place expand columns only in the first header row with grouped columns', async () => {
+      const { instance } = await createDataGrid({
+        dataSource: [
+          {
+            TestField1: 'group1', TestField2: 'group2', TestField3: 'val3', TestField4: 'val4',
+          },
+        ],
+        columns: [
+          { dataField: 'TestField1', caption: 'Column 1', groupIndex: 0 },
+          {
+            caption: 'Band Column 1',
+            columns: [
+              { dataField: 'TestField2', caption: 'Column 2', groupIndex: 1 },
+              { dataField: 'TestField3', caption: 'Column 3' },
+              { caption: 'Band Column 2', columns: [{ dataField: 'TestField4', caption: 'Column 4' }] },
+            ],
+          },
+        ],
+      });
+
+      const columnsController = instance.getController('columns');
+      const rowCount = columnsController.getRowCount();
+
+      // Row 0: expand columns + Band Column 1
+      const firstRowColumns = columnsController.getVisibleColumns(0);
+      const expandColumnsInFirstRow = firstRowColumns.filter((col) => col.command === 'expand');
+
+      expect(rowCount).toBe(3);
+      expect(firstRowColumns.length).toBe(3);
+      expect(expandColumnsInFirstRow.length).toBe(2);
+
+      expandColumnsInFirstRow.forEach((col) => {
+        expect(col.rowspan).toBe(3);
+      });
+
+      const bandColumn = firstRowColumns.find((col) => col.caption === 'Band Column 1');
+
+      expect(bandColumn).toBeDefined();
+      expect(bandColumn.isBand).toBe(true);
+      expect(bandColumn.rowspan).toBeUndefined();
+
+      // Row 1: Column 3 + Band Column 2
+      const secondRowColumns = columnsController.getVisibleColumns(1);
+      const expandColumnsInSecondRow = secondRowColumns.filter((col) => col.command === 'expand');
+
+      expect(secondRowColumns.length).toBe(2);
+      expect(expandColumnsInSecondRow.length).toBe(0);
+
+      const column3 = secondRowColumns.find((col) => col.caption === 'Column 3');
+
+      expect(column3).toBeDefined();
+      expect(column3.rowspan).toBe(2);
+
+      const bandColumn2 = secondRowColumns.find((col) => col.caption === 'Band Column 2');
+
+      expect(bandColumn2).toBeDefined();
+      expect(bandColumn2.isBand).toBe(true);
+      expect(bandColumn2.rowspan).toBeUndefined();
+
+      // Row 2: Column 4
+      const thirdRowColumns = columnsController.getVisibleColumns(2);
+      const expandColumnsInThirdRow = thirdRowColumns.filter((col) => col.command === 'expand');
+      const column4 = thirdRowColumns.find((col) => col.caption === 'Column 4');
+
+      expect(expandColumnsInThirdRow.length).toBe(0);
+      expect(column4).toBeDefined();
+      expect(column4.rowspan).toBeUndefined();
+    });
+
+    it('should place expand columns only in the first header row with showWhenGrouped', async () => {
+      const { instance } = await createDataGrid({
+        dataSource: [
+          { field1: 'g1', field2: 'g2', field3: 'g3' },
+        ],
+        columns: [{
+          dataField: 'field1',
+          showWhenGrouped: true,
+          groupIndex: 0,
+        }, {
+          caption: 'band2',
+          columns: [{
+            dataField: 'field2',
+            showWhenGrouped: true,
+            groupIndex: 1,
+          }, {
+            caption: 'band3',
+            columns: [{
+              dataField: 'field3',
+              showWhenGrouped: true,
+              groupIndex: 2,
+            }],
+          }],
+        }],
+      });
+
+      const columnsController = instance.getController('columns');
+      const rowCount = columnsController.getRowCount();
+
+      expect(rowCount).toBe(3);
+
+      // Row 0: expand columns with rowspan=3, data columns with rowspan=3, band column
+      const firstRowColumns = columnsController.getVisibleColumns(0);
+      const expandColumnsRow0 = firstRowColumns.filter((col) => col.command === 'expand');
+
+      expect(expandColumnsRow0.length).toBe(3);
+      expandColumnsRow0.forEach((col) => {
+        expect(col.rowspan).toBe(3);
+      });
+
+      // showWhenGrouped data columns should be in the first row with rowspan=3
+      const field1Col = firstRowColumns.find((col) => col.caption === 'Field 1' && !col.command);
+      expect(field1Col).toBeDefined();
+      expect(field1Col.rowspan).toBe(3);
+
+      // band2 should be in the first row without rowspan (it has children)
+      const band2Col = firstRowColumns.find((col) => col.caption === 'band2');
+      expect(band2Col).toBeDefined();
+      expect(band2Col.rowspan).toBeUndefined();
+
+      // Row 1: no expand columns
+      const secondRowColumns = columnsController.getVisibleColumns(1);
+      const expandColumnsRow1 = secondRowColumns.filter((col) => col.command === 'expand');
+
+      expect(expandColumnsRow1.length).toBe(0);
+
+      // band3 should be in the second row
+      const band3Col = secondRowColumns.find((col) => col.caption === 'band3');
+      expect(band3Col).toBeDefined();
+
+      // Row 2: no expand columns
+      const thirdRowColumns = columnsController.getVisibleColumns(2);
+      const expandColumnsRow2 = thirdRowColumns.filter((col) => col.command === 'expand');
+
+      expect(expandColumnsRow2.length).toBe(0);
+    });
+
+    it('should not set rowspan on expand columns when there is only one header row with grouped showWhenGrouped columns', async () => {
+      const { instance } = await createDataGrid({
+        dataSource: [
+          {
+            field1: 'val1', field2: 'val2', field3: 'g1', field4: 'val4',
+          },
+        ],
+        columns: [
+          'field1',
+          'field2',
+          { dataField: 'field3', showWhenGrouped: true, groupIndex: 0 },
+        ],
+      });
+
+      const columnsController = instance.getController('columns');
+      const rowCount = columnsController.getRowCount();
+
+      expect(rowCount).toBe(1);
+
+      const visibleColumns = columnsController.getVisibleColumns(0);
+      const expandColumn = visibleColumns.find((col) => col.command === 'expand' || col.type === 'groupExpand');
+
+      expect(expandColumn).toBeDefined();
+      expect(expandColumn.rowspan).toBeUndefined();
+    });
+
+    it('should not set rowspan on expand column when there is a single header row', async () => {
+      const { instance } = await createDataGrid({
+        dataSource,
+        columns: ['id', 'name'],
+        masterDetail: {
+          enabled: true,
+        },
+      });
+
+      const columnsController = instance.getController('columns');
+      const rowCount = columnsController.getRowCount();
+      const firstRowColumns = columnsController.getVisibleColumns(0);
+
+      const expandColumn = firstRowColumns.find((col) => col.command === 'expand');
+
+      expect(rowCount).toBe(1);
+      expect(expandColumn).toBeDefined();
+      expect(expandColumn.rowspan).toBeUndefined();
+    });
+  });
+});