Skip to content

Commit b839f23

Browse files
wdevfxwdevfx
authored
DataGrid: fix sticky + virtual columns + grouping row case (DevExpress#29399)
1 parent c6caa6d commit b839f23

File tree

8 files changed

+242
-11
lines changed

8 files changed

+242
-11
lines changed

‎e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/vertical_scroll_and_focused_fixed_column_2_mask.png‎

2.23 KB
Loading

‎e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_grouping_expand_scroll_right.png‎

11.8 KB
Loading

‎e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_grouping_scroll_right.png‎

14.6 KB
Loading

‎e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_nested_grouping_scroll_right.png‎

21.1 KB
Loading

‎e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withVirtualColumns.ts‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { safeSizeTest } from '../../../../helpers/safeSizeTest';
44
import { createWidget } from '../../../../helpers/createWidget';
55
import url from '../../../../helpers/getPageUrl';
66
import { getData } from '../../helpers/generateDataSourceData';
7+
import { groupingDataSource, groupingDataSourceFields } from '../helpers/data';
78

89
const DATA_GRID_SELECTOR = '#container';
910

@@ -75,3 +76,130 @@ safeSizeTest('There should be no way to set a sticky fixed position for columns
7576
columns[1].fixed = true;
7677
},
7778
}));
79+
80+
safeSizeTest('should render group row in scroll right max position', async (t) => {
81+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
82+
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
83+
84+
await t.expect(dataGrid.isReady()).ok();
85+
86+
// NOTE: Scroll to max right position
87+
await dataGrid.scrollTo(t, { x: 9999999 });
88+
89+
await t.expect(dataGrid.isReady()).ok();
90+
await takeScreenshot('virtual_columns_with_grouping_scroll_right.png', dataGrid.element);
91+
await t
92+
.expect(compareResults.isValid())
93+
.ok(compareResults.errorMessages());
94+
}).before(async () => createWidget('dxDataGrid', {
95+
dataSource: groupingDataSource,
96+
columns: [
97+
{
98+
dataField: 'groupFieldA',
99+
groupIndex: 0,
100+
fixed: true,
101+
},
102+
...groupingDataSourceFields.map((dataField) => ({
103+
dataField,
104+
width: 100,
105+
})),
106+
],
107+
groupPanel: {
108+
visible: true,
109+
},
110+
grouping: {
111+
autoExpandAll: true,
112+
},
113+
scrolling: {
114+
columnRenderingMode: 'virtual',
115+
},
116+
// NOTE: 3x columns (by 100px each) + 30px command column
117+
width: 330,
118+
}));
119+
120+
safeSizeTest('should render nested group row in scroll right max position', async (t) => {
121+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
122+
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
123+
124+
await t.expect(dataGrid.isReady()).ok();
125+
126+
// NOTE: Scroll to max right position
127+
await dataGrid.scrollTo(t, { x: 9999999 });
128+
129+
await t.expect(dataGrid.isReady()).ok();
130+
await takeScreenshot('virtual_columns_with_nested_grouping_scroll_right.png', dataGrid.element);
131+
await t
132+
.expect(compareResults.isValid())
133+
.ok(compareResults.errorMessages());
134+
}).before(async () => createWidget('dxDataGrid', {
135+
dataSource: groupingDataSource,
136+
columns: [
137+
{
138+
dataField: 'groupFieldA',
139+
groupIndex: 0,
140+
fixed: true,
141+
},
142+
{
143+
dataField: 'groupFieldB',
144+
groupIndex: 1,
145+
fixed: true,
146+
},
147+
...groupingDataSourceFields.map((dataField) => ({
148+
dataField,
149+
width: 100,
150+
})),
151+
],
152+
groupPanel: {
153+
visible: true,
154+
},
155+
grouping: {
156+
autoExpandAll: true,
157+
},
158+
scrolling: {
159+
columnRenderingMode: 'virtual',
160+
},
161+
// NOTE: 3x columns (by 100px each) + 30px command column
162+
width: 330,
163+
}));
164+
165+
safeSizeTest('expand group icon should be clickable in scroll right max position', async (t) => {
166+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
167+
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
168+
169+
await t.expect(dataGrid.isReady()).ok();
170+
171+
// NOTE: Scroll to max right position
172+
await dataGrid.scrollTo(t, { x: 9999999 });
173+
const expandCell = dataGrid.getGroupRow(1).getCell(0);
174+
await t.click(expandCell.element);
175+
176+
await t.expect(dataGrid.isReady()).ok();
177+
await takeScreenshot('virtual_columns_with_grouping_expand_scroll_right.png', dataGrid.element);
178+
await t
179+
.expect(compareResults.isValid())
180+
.ok(compareResults.errorMessages());
181+
}).before(async () => createWidget('dxDataGrid', {
182+
dataSource: groupingDataSource,
183+
columns: [
184+
{
185+
dataField: 'groupFieldA',
186+
groupIndex: 0,
187+
fixed: true,
188+
},
189+
...groupingDataSourceFields.map((dataField) => ({
190+
dataField,
191+
width: 100,
192+
})),
193+
],
194+
groupPanel: {
195+
visible: true,
196+
},
197+
grouping: {
198+
autoExpandAll: false,
199+
},
200+
scrolling: {
201+
columnRenderingMode: 'virtual',
202+
},
203+
// NOTE: 3x columns (by 100px each) + 30px command column
204+
width: 330,
205+
}));

‎e2e/testcafe-devextreme/tests/dataGrid/sticky/helpers/data.ts‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -423,6 +423,92 @@ const columns: Column[] = [{
423423
fixedPosition: 'right',
424424
}];
425425

426+
export const groupingDataSource = [
427+
{
428+
groupFieldA: 'Group A_0',
429+
groupFieldB: 'Group A_1',
430+
fieldA: 'A_0',
431+
fieldB: 'B_0',
432+
fieldC: 'C_0',
433+
fieldD: 'D_0',
434+
fieldE: 'E_0',
435+
fieldF: 'F_0',
436+
fieldG: 'G_0',
437+
fieldH: 'H_0',
438+
fieldI: 'I_0',
439+
fieldJ: 'J_0',
440+
},
441+
{
442+
groupFieldA: 'Group A_0',
443+
groupFieldB: 'Group A_1',
444+
fieldA: 'A_1',
445+
fieldB: 'B_1',
446+
fieldC: 'C_1',
447+
fieldD: 'D_1',
448+
fieldE: 'E_1',
449+
fieldF: 'F_1',
450+
fieldG: 'G_1',
451+
fieldH: 'H_1',
452+
fieldI: 'I_1',
453+
fieldJ: 'J_1',
454+
},
455+
{
456+
groupFieldA: 'Group A_0',
457+
groupFieldB: 'Group A_1',
458+
fieldA: 'A_2',
459+
fieldB: 'B_2',
460+
fieldC: 'C_2',
461+
fieldD: 'D_2',
462+
fieldE: 'E_2',
463+
fieldF: 'F_2',
464+
fieldG: 'G_2',
465+
fieldH: 'H_2',
466+
fieldI: 'I_2',
467+
fieldJ: 'J_2',
468+
},
469+
{
470+
groupFieldA: 'Group B_0',
471+
groupFieldB: 'Group B_1',
472+
fieldA: 'A_0',
473+
fieldB: 'B_0',
474+
fieldC: 'C_0',
475+
fieldD: 'D_0',
476+
fieldE: 'E_0',
477+
fieldF: 'F_0',
478+
fieldG: 'G_0',
479+
fieldH: 'H_0',
480+
fieldI: 'I_0',
481+
fieldJ: 'J_0',
482+
},
483+
{
484+
groupFieldA: 'Group B_0',
485+
groupFieldB: 'Group B_1',
486+
fieldA: 'A_1',
487+
fieldB: 'B_1',
488+
fieldC: 'C_1',
489+
fieldD: 'D_1',
490+
fieldE: 'E_1',
491+
fieldF: 'F_1',
492+
fieldG: 'G_1',
493+
fieldH: 'H_1',
494+
fieldI: 'I_1',
495+
fieldJ: 'J_1',
496+
},
497+
];
498+
499+
export const groupingDataSourceFields = [
500+
'fieldA',
501+
'fieldB',
502+
'fieldC',
503+
'fieldD',
504+
'fieldE',
505+
'fieldF',
506+
'fieldG',
507+
'fieldH',
508+
'fieldI',
509+
'fieldJ',
510+
];
511+
426512
export const defaultConfig = {
427513
width: 700,
428514
height: 500,

‎packages/devextreme-scss/scss/widgets/base/_gridBase.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -532,7 +532,9 @@
532532
width: $grid-command-expand-column-width;
533533
min-width: $grid-command-expand-column-width;
534534
max-width: $grid-command-expand-column-width;
535-
z-index: 1;
535+
536+
/* NOTE: z-index of group row in sticky mode is 2 */
537+
z-index: 3;
536538

537539
@include user-select(none);
538540
}

‎packages/devextreme/js/__internal/grids/grid_core/views/m_columns_view.ts‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -825,18 +825,33 @@ export class ColumnsView extends ColumnStateMixin(modules.View) {
825825
/**
826826
* @extended: editing
827827
*/
828-
protected _setCellAriaAttributes($cell, cellOptions, options?) {
829-
if (cellOptions.rowType !== 'freeSpace') {
830-
this.setAria('role', 'gridcell', $cell);
831-
if (options?.row?.node?.hasChildren) {
832-
const { row } = options;
833-
this.setAria('expanded', row.isExpanded, $cell);
834-
}
828+
protected _setCellAriaAttributes(
829+
$cell: dxElementWrapper,
830+
cellOptions: { rowType: 'freeSpace' | 'group'; columnIndex: number },
831+
options?: any,
832+
): void {
833+
const { row } = options;
834+
const isFreeSpaceRow = cellOptions.rowType === 'freeSpace';
835+
const isGroupRow = cellOptions.rowType === 'group';
836+
const rowHasChildren = row?.node?.hasChildren;
837+
838+
if (isFreeSpaceRow) {
839+
return;
840+
}
841+
842+
this.setAria('role', 'gridcell', $cell);
835843

836-
const columnIndexOffset = this._columnsController.getColumnIndexOffset();
837-
const ariaColIndex = cellOptions.columnIndex + columnIndexOffset + 1;
838-
this.setAria('colindex', ariaColIndex, $cell);
844+
if (rowHasChildren) {
845+
this.setAria('expanded', row.isExpanded, $cell);
839846
}
847+
848+
const columnIndexOffset = this._columnsController.getColumnIndexOffset();
849+
// NOTE: Group rows always visible and their aria column idx shouldn't be shifted
850+
const ariaColIndex = isGroupRow
851+
? cellOptions.columnIndex + 1
852+
: cellOptions.columnIndex + columnIndexOffset + 1;
853+
854+
this.setAria('colindex', ariaColIndex, $cell);
840855
}
841856

842857
protected _renderCell($row, options) {

0 commit comments

Comments
 (0)