DataGrid – Resize indicator is moved when resizing a grouped column if showWhenGrouped is set to true (T1314667) (#31913)

Author: Raushen

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

@@ -67,3 +67,55 @@ test('column separator should starts from the parent', async (t) => {
     columns: ['GDP_Total', 'Population_Urban'],
   }, 'Area'],
 }));
+
+// T1314667
+test('DataGrid – Resize indicator is moved when resizing a grouped column if showWhenGrouped is set to true', async (t) => {
+  const dataGrid = new DataGrid('#container');
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await dataGrid.resizeHeader(3, 30, false);
+
+  await t
+    .expect(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0).element.clientWidth)
+    .within(128, 130);
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [{
+      ID: 1,
+      Country: 'Brazil',
+      Area: 8515767,
+      Population_Urban: 0.85,
+      Population_Rural: 0.15,
+      Population_Total: 205809000,
+    }],
+    keyExpr: 'ID',
+    allowColumnResizing: true,
+    columnResizingMode: 'widget',
+    width: 500,
+    columns: [
+      {
+        dataField: 'ID',
+        fixed: true,
+        allowReordering: false,
+        width: 50,
+      },
+
+      {
+        caption: 'Population',
+        columns: [
+          {
+            dataField: 'Country',
+            showWhenGrouped: true,
+            width: 100,
+            groupIndex: 0,
+          },
+          { dataField: 'Area' },
+          { dataField: 'Population_Total' },
+          { dataField: 'Population_Urban' },
+          { dataField: 'Population_Rural' },
+        ],
+      },
+    ],
+  });
+});

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

@@ -5,12 +5,12 @@ import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { Deferred } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
-import { each } from '@js/core/utils/iterator';
 import { getHeight } from '@js/core/utils/size';
 import { isDefined } from '@js/core/utils/type';
 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 { CLASSES as REORDERING_CLASSES } from '../columns_resizing_reordering/const';
 import { registerKeyboardAction } from '../m_accessibility';
 import { ColumnsView } from '../views/m_columns_view';
@@ -458,26 +458,34 @@ export class ColumnHeadersView extends ColumnsView {
   }
 
   public getColumnElements(index?, bandColumnIndex?) {
-    const that = this;
     let $cellElement;
-    const columnsController = that._columnsController;
-    const rowCount = that.getRowCount();
+    const columnsController = this._columnsController;
+    const rowCount = this.getRowCount();
 
-    if (that.option('showColumnHeaders')) {
+    if (this.option('showColumnHeaders')) {
       if (rowCount > 1 && (!isDefined(index) || isDefined(bandColumnIndex))) {
         const result: any[] = [];
-        const visibleColumns = isDefined(bandColumnIndex) ? columnsController.getChildrenByBandColumn(bandColumnIndex, true) : columnsController.getVisibleColumns();
 
-        each(visibleColumns, (_, column) => {
-          const rowIndex = isDefined(index) ? index : columnsController.getRowIndex(column.index);
-          $cellElement = that._getCellElement(rowIndex, columnsController.getVisibleIndex(column.index, rowIndex));
-          $cellElement && result.push($cellElement.get(0));
+        let visibleColumns: Column[] = [];
+        if (isDefined(bandColumnIndex)) {
+          visibleColumns = columnsController.getChildrenByBandColumn(bandColumnIndex, true);
+        } else {
+          visibleColumns = columnsController.getVisibleColumns();
+        }
+
+        visibleColumns.forEach((column) => {
+          const rowIndex = index ?? columnsController.getRowIndex(column.index);
+          const visibleIndex = columnsController.getVisibleIndex(column.index, rowIndex);
+          $cellElement = this._getCellElement(rowIndex, visibleIndex);
+          if ($cellElement) {
+            result.push($cellElement.get(0));
+          }
         });
 
         // @ts-expect-error
         return $(result);
       } if (!index || index < rowCount) {
-        return that.getCellElements(index || 0);
+        return this.getCellElements(index || 0);
       }
     }
 

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

@@ -1783,9 +1783,18 @@ export class ColumnsController extends modules.Controller {
 
   public getRowIndex(columnIndex, alwaysGetRowIndex?) {
     const column = this._columns[columnIndex];
-    const bandColumnsCache = this.getBandColumnsCache();
+    if (!column) {
+      return 0;
+    }
 
-    return column && (alwaysGetRowIndex || column.visible && !(column.command || isDefined(column.groupIndex))) ? getParentBandColumns(columnIndex, bandColumnsCache.columnParentByIndex).length : 0;
+    const isCommandOrGroupColumn = column.command || this._isColumnInGroupPanel(column);
+    const isVisibleDataColumn = column.visible && !isCommandOrGroupColumn;
+    if (!alwaysGetRowIndex && !isVisibleDataColumn) {
+      return 0;
+    }
+
+    const bandColumnsCache = this.getBandColumnsCache();
+    return getParentBandColumns(columnIndex, bandColumnsCache.columnParentByIndex).length;
   }
 
   public getChildrenByBandColumn(bandColumnIndex, onlyVisibleDirectChildren?) {