diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing.ts index ce20a0656e88..d7181b8eec53 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing.ts +++ b/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' }, + ], + }, + ], + }); +}); diff --git a/packages/devextreme/js/__internal/grids/grid_core/column_headers/m_column_headers.ts b/packages/devextreme/js/__internal/grids/grid_core/column_headers/m_column_headers.ts index 4d0a803bc467..d3733ca5f984 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/column_headers/m_column_headers.ts +++ b/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); } } diff --git a/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts index c0d92658f1c7..03a8130b6750 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts +++ b/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?) {