Skip to content

Commit 1251a32

Browse files
anna-shakhovaanna-shakhova
committed
DataGrid: prevent column resizing in band area
1 parent ce142b1 commit 1251a32

File tree

7 files changed

+229
-92
lines changed

7 files changed

+229
-92
lines changed

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

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import DataGrid from 'devextreme-testcafe-models/dataGrid';
2+
3+
import { ClientFunction } from 'testcafe';
4+
import url from '../../../../helpers/getPageUrl';
5+
import { createWidget } from '../../../../helpers/createWidget';
6+
7+
fixture.disablePageReloads`Column resizing`
8+
.page(url(__dirname, '../../../container.html'));
9+
10+
// T1314667
11+
test('DataGrid – Resize indicator is moved when resizing a grouped column if showWhenGrouped is set to true', async (t) => {
12+
const dataGrid = new DataGrid('#container');
13+
14+
await t.expect(dataGrid.isReady()).ok();
15+
16+
await dataGrid.resizeHeader(3, 30, false);
17+
18+
await t
19+
.expect(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0).element.clientWidth)
20+
.within(128, 130);
21+
}).before(async () => {
22+
await createWidget('dxDataGrid', {
23+
dataSource: [{
24+
ID: 1,
25+
Country: 'Brazil',
26+
Area: 8515767,
27+
Population_Urban: 0.85,
28+
Population_Rural: 0.15,
29+
Population_Total: 205809000,
30+
}],
31+
keyExpr: 'ID',
32+
allowColumnResizing: true,
33+
columnResizingMode: 'widget',
34+
width: 500,
35+
columns: [
36+
{
37+
dataField: 'ID',
38+
fixed: true,
39+
allowReordering: false,
40+
width: 50,
41+
},
42+
43+
{
44+
caption: 'Population',
45+
columns: [
46+
{
47+
dataField: 'Country',
48+
showWhenGrouped: true,
49+
width: 100,
50+
groupIndex: 0,
51+
},
52+
{ dataField: 'Area' },
53+
{ dataField: 'Population_Total' },
54+
{ dataField: 'Population_Urban' },
55+
{ dataField: 'Population_Rural' },
56+
],
57+
},
58+
],
59+
});
60+
});
61+
62+
const tryResizeHeaderInBandArea = (
63+
dataGrid: DataGrid,
64+
columnIndex: number,
65+
offset: number,
66+
): Promise<void> => {
67+
const { getInstance } = dataGrid;
68+
69+
const triggerPointerEvent = ($element: JQuery<any>, eventName: string, x: number, y: number) => {
70+
$element
71+
.trigger($.Event(eventName, {
72+
pageX: x,
73+
pageY: y,
74+
pointers: [{ pointerId: 1 }],
75+
}));
76+
};
77+
78+
return ClientFunction(
79+
() => {
80+
const gridInstance = getInstance() as any;
81+
const $gridElement = $(gridInstance.element());
82+
const columnHeadersView = gridInstance.getView('columnHeadersView');
83+
const $header = $(columnHeadersView.getHeaderElement(columnIndex));
84+
const headerOffset = $header.offset();
85+
86+
triggerPointerEvent($(document), 'dxpointermove', headerOffset.left, headerOffset.top - 10);
87+
triggerPointerEvent($gridElement, 'dxpointerdown', headerOffset.left, headerOffset.top - 10);
88+
triggerPointerEvent($(document), 'dxpointermove', headerOffset.left + offset, headerOffset.top - 10);
89+
triggerPointerEvent($(document), 'dxpointerup', headerOffset.left + offset, headerOffset.top - 10);
90+
},
91+
{
92+
dependencies: {
93+
getInstance,
94+
triggerPointerEvent,
95+
columnIndex,
96+
offset,
97+
},
98+
},
99+
)();
100+
};
101+
102+
// T1317039
103+
test('DataGrid – Columns should not be resized from band area (T1317039)', async (t) => {
104+
const dataGrid = new DataGrid('#container');
105+
106+
await tryResizeHeaderInBandArea(dataGrid, 3, 30);
107+
108+
await t
109+
.expect(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0).element.clientWidth)
110+
.within(98, 100);
111+
}).before(async () => {
112+
await createWidget('dxDataGrid', {
113+
dataSource: [{
114+
ID: 1,
115+
Country: 'Brazil',
116+
Area: 8515767,
117+
Population_Urban: 0.85,
118+
Population_Rural: 0.15,
119+
Population_Total: 205809000,
120+
}],
121+
keyExpr: 'ID',
122+
allowColumnResizing: true,
123+
columnResizingMode: 'widget',
124+
width: 500,
125+
columns: [
126+
{
127+
dataField: 'ID',
128+
fixed: true,
129+
allowReordering: false,
130+
width: 50,
131+
},
132+
133+
{
134+
caption: 'Population',
135+
columns: [
136+
{
137+
dataField: 'Country',
138+
showWhenGrouped: true,
139+
width: 100,
140+
groupIndex: 0,
141+
},
142+
{ dataField: 'Area' },
143+
{ dataField: 'Population_Total' },
144+
{ dataField: 'Population_Urban' },
145+
{ dataField: 'Population_Rural' },
146+
],
147+
},
148+
],
149+
});
150+
});

e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing.ts renamed to e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/visual.ts

Lines changed: 4 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
22
import DataGrid from 'devextreme-testcafe-models/dataGrid';
33

4-
import url from '../../../helpers/getPageUrl';
5-
import { createWidget } from '../../../helpers/createWidget';
6-
import { testScreenshot } from '../../../helpers/themeUtils';
4+
import url from '../../../../helpers/getPageUrl';
5+
import { createWidget } from '../../../../helpers/createWidget';
6+
import { testScreenshot } from '../../../../helpers/themeUtils';
77

88
fixture.disablePageReloads`Column resizing`
9-
.page(url(__dirname, '../../container.html'));
9+
.page(url(__dirname, '../../../container.html'));
1010

1111
test('column separator should starts from the parent', async (t) => {
1212
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
@@ -72,55 +72,3 @@ test('column separator should starts from the parent', async (t) => {
7272
columns: ['GDP_Total', 'Population_Urban'],
7373
}, 'Area'],
7474
}));
75-
76-
// T1314667
77-
test('DataGrid – Resize indicator is moved when resizing a grouped column if showWhenGrouped is set to true', async (t) => {
78-
const dataGrid = new DataGrid('#container');
79-
80-
await t.expect(dataGrid.isReady()).ok();
81-
82-
await dataGrid.resizeHeader(3, 30, false);
83-
84-
await t
85-
.expect(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0).element.clientWidth)
86-
.within(128, 130);
87-
}).before(async () => {
88-
await createWidget('dxDataGrid', {
89-
dataSource: [{
90-
ID: 1,
91-
Country: 'Brazil',
92-
Area: 8515767,
93-
Population_Urban: 0.85,
94-
Population_Rural: 0.15,
95-
Population_Total: 205809000,
96-
}],
97-
keyExpr: 'ID',
98-
allowColumnResizing: true,
99-
columnResizingMode: 'widget',
100-
width: 500,
101-
columns: [
102-
{
103-
dataField: 'ID',
104-
fixed: true,
105-
allowReordering: false,
106-
width: 50,
107-
},
108-
109-
{
110-
caption: 'Population',
111-
columns: [
112-
{
113-
dataField: 'Country',
114-
showWhenGrouped: true,
115-
width: 100,
116-
groupIndex: 0,
117-
},
118-
{ dataField: 'Area' },
119-
{ dataField: 'Population_Total' },
120-
{ dataField: 'Population_Urban' },
121-
{ dataField: 'Population_Rural' },
122-
],
123-
},
124-
],
125-
});
126-
});

‎packages/devextreme/js/__internal/grids/grid_core/column_fixing/m_column_fixing.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import type {
2323
DraggingHeaderViewController,
2424
} from '../columns_resizing_reordering/m_columns_resizing_reordering';
2525
import type { KeyboardNavigationController } from '../keyboard_navigation/m_keyboard_navigation';
26-
import type { ModuleType } from '../m_types';
26+
import type { ColumnPoint, Coordinates, ModuleType } from '../m_types';
2727
import gridCoreUtils from '../m_utils';
2828
import type { ColumnsView } from '../views/m_columns_view';
2929
import { normalizeWidth } from '../views/m_columns_view';
@@ -1130,19 +1130,23 @@ const columnsResizer = (Base: ModuleType<ColumnsResizerViewController>) => class
11301130
}
11311131
}
11321132

1133-
protected _getTargetPoint(pointsByColumns, currentX, deltaX) {
1133+
protected _getTargetPoint(
1134+
pointsByColumns: ColumnPoint[] | null | undefined,
1135+
currentPoint: Coordinates,
1136+
deltaX: number,
1137+
): ColumnPoint | null {
11341138
// @ts-expect-error
11351139
const $transparentColumn = this._columnHeadersView.getTransparentColumnElement();
11361140

11371141
if ($transparentColumn && $transparentColumn.length) {
11381142
const boundingRect = getBoundingRect($transparentColumn.get(0));
11391143

1140-
if (currentX <= boundingRect.left || currentX >= boundingRect.right) {
1141-
return super._getTargetPoint(this._pointsByFixedColumns, currentX, deltaX);
1144+
if (currentPoint.x <= boundingRect.left || currentPoint.x >= boundingRect.right) {
1145+
return super._getTargetPoint(this._pointsByFixedColumns, currentPoint, deltaX);
11421146
}
11431147
}
11441148

1145-
return super._getTargetPoint(pointsByColumns, currentX, deltaX);
1149+
return super._getTargetPoint(pointsByColumns, currentPoint, deltaX);
11461150
}
11471151
};
11481152

‎packages/devextreme/js/__internal/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering.ts‎

Lines changed: 48 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { isDefined, isObject, isString } from '@js/core/utils/type';
2424
import swatchContainer from '@ts/core/utils/swatch_container';
2525
import { getDraggingPanelBoundingRects } from '@ts/grids/grid_core/columns_resizing_reordering/utils';
2626
import type { EditorFactory } from '@ts/grids/grid_core/editor_factory/m_editor_factory';
27-
import type { ColumnPoint, ModuleType } from '@ts/grids/grid_core/m_types';
27+
import type { ColumnPoint, Coordinates, ModuleType } from '@ts/grids/grid_core/m_types';
2828
import type { RowsView } from '@ts/grids/grid_core/views/m_rows_view';
2929

3030
import type { ColumnChooserView } from '../column_chooser/m_column_chooser';
@@ -668,13 +668,13 @@ export class ColumnsResizerViewController extends modules.ViewController {
668668

669669
private _$parentContainer: any;
670670

671-
public _targetPoint: any;
671+
public _targetPoint: ColumnPoint | null | undefined;
672672

673673
private _resizingInfo: any;
674674

675675
protected _columnsController!: ColumnsController;
676676

677-
private _pointsByColumns: any;
677+
private _pointsByColumns: ColumnPoint[] | null | undefined;
678678

679679
private _moveSeparatorHandler: any;
680680

@@ -785,13 +785,24 @@ export class ColumnsResizerViewController extends modules.ViewController {
785785
/**
786786
* @extended: column_fixing
787787
*/
788-
protected _getTargetPoint(pointsByColumns, currentX, deltaX) {
788+
protected _getTargetPoint(
789+
pointsByColumns: ColumnPoint[] | null | undefined,
790+
currentPoint: Coordinates,
791+
deltaX: number,
792+
): ColumnPoint | null {
789793
if (pointsByColumns) {
790-
for (let i = 0; i < pointsByColumns.length; i++) {
791-
if (pointsByColumns[i].x === pointsByColumns[0].x && pointsByColumns[i + 1] && pointsByColumns[i].x === pointsByColumns[i + 1].x) {
794+
for (let i = 0; i < pointsByColumns.length; i += 1) {
795+
if (pointsByColumns[i].x === pointsByColumns[0].x
796+
&& pointsByColumns[i + 1]
797+
&& pointsByColumns[i].x === pointsByColumns[i + 1].x
798+
) {
799+
// eslint-disable-next-line no-continue
792800
continue;
793801
}
794-
if (pointsByColumns[i].x - deltaX <= currentX && currentX <= pointsByColumns[i].x + deltaX) {
802+
if (currentPoint.y >= pointsByColumns[i].y
803+
&& pointsByColumns[i].x - deltaX <= currentPoint.x
804+
&& currentPoint.x <= pointsByColumns[i].x + deltaX
805+
) {
795806
return pointsByColumns[i];
796807
}
797808
}
@@ -843,7 +854,11 @@ export class ColumnsResizerViewController extends modules.ViewController {
843854
}
844855
}
845856

846-
that._targetPoint = that._getTargetPoint(that.pointsByColumns(), eventData.x, columnsSeparatorWidth);
857+
that._targetPoint = that._getTargetPoint(
858+
that.pointsByColumns(),
859+
eventData,
860+
columnsSeparatorWidth,
861+
);
847862
that._previousParentOffset = parentOffset;
848863
that._isReadyResizing = false;
849864

@@ -895,19 +910,21 @@ export class ColumnsResizerViewController extends modules.ViewController {
895910
}
896911

897912
private _setupResizingInfo(posX) {
898-
const currentColumnIndex = this._targetPoint.columnIndex;
899-
const nextColumnIndex = this._getNextColumnIndex(currentColumnIndex);
900-
const $currentHeader = this._columnHeadersView.getHeaderElement(currentColumnIndex);
901-
const $nextHeader = this._columnHeadersView.getHeaderElement(nextColumnIndex);
902-
903-
this._resizingInfo = {
904-
startPosX: posX,
905-
currentColumnIndex,
906-
currentColumnWidth: $currentHeader?.length ? getBoundingRect($currentHeader[0]).width : 0,
907-
nextColumnIndex,
908-
nextColumnWidth: $nextHeader?.length ? getBoundingRect($nextHeader[0]).width : 0,
909-
needToInvertResizing: this._needToInvertResizing($currentHeader),
910-
};
913+
if (this._targetPoint) {
914+
const currentColumnIndex = this._targetPoint.columnIndex;
915+
const nextColumnIndex = this._getNextColumnIndex(currentColumnIndex);
916+
const $currentHeader = this._columnHeadersView.getHeaderElement(currentColumnIndex);
917+
const $nextHeader = this._columnHeadersView.getHeaderElement(nextColumnIndex);
918+
919+
this._resizingInfo = {
920+
startPosX: posX,
921+
currentColumnIndex,
922+
currentColumnWidth: $currentHeader?.length ? getBoundingRect($currentHeader[0]).width : 0,
923+
nextColumnIndex,
924+
nextColumnWidth: $nextHeader?.length ? getBoundingRect($nextHeader[0]).width : 0,
925+
needToInvertResizing: this._needToInvertResizing($currentHeader),
926+
};
927+
}
911928
}
912929

913930
/**
@@ -920,7 +937,11 @@ export class ColumnsResizerViewController extends modules.ViewController {
920937

921938
if (isTouchEvent(e)) {
922939
if (that._isHeadersRowArea(eventData.y)) {
923-
that._targetPoint = that._getTargetPoint(that.pointsByColumns(), eventData.x, COLUMNS_SEPARATOR_TOUCH_TRACKER_WIDTH);
940+
that._targetPoint = that._getTargetPoint(
941+
that.pointsByColumns(),
942+
eventData,
943+
COLUMNS_SEPARATOR_TOUCH_TRACKER_WIDTH,
944+
);
924945
if (that._targetPoint) {
925946
that._columnsSeparatorView.moveByX(that._targetPoint.x - that._columnsSeparatorView.width() / 2);
926947
that._isReadyResizing = true;
@@ -1270,15 +1291,14 @@ export class ColumnsResizerViewController extends modules.ViewController {
12701291
return this._isResizing;
12711292
}
12721293

1273-
private pointsByColumns(value) {
1294+
private pointsByColumns(value?: ColumnPoint[] | null): ColumnPoint[] | null | undefined {
12741295
if (value !== undefined) {
12751296
this._pointsByColumns = value;
1276-
} else {
1277-
if (!this._pointsByColumns) {
1278-
this._generatePointsByColumns();
1279-
}
1280-
return this._pointsByColumns;
1297+
} else if (!this._pointsByColumns) {
1298+
this._generatePointsByColumns();
12811299
}
1300+
1301+
return this._pointsByColumns;
12821302
}
12831303
}
12841304

0 commit comments

Comments
 (0)