Skip to content

Commit 4ac1254

Browse files
Alyar666Alyar666
authored
DataGrid: Fix cell focus after grouping nested columns using the keyboard (DevExpress#29971)
Co-authored-by: Alyar <>
1 parent 84d5bee commit 4ac1254

File tree

11 files changed

+551
-208
lines changed

11 files changed

+551
-208
lines changed

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

Lines changed: 375 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,375 @@
1+
import DataGrid from 'devextreme-testcafe-models/dataGrid';
2+
import url from '../../../../helpers/getPageUrl';
3+
import { createWidget } from '../../../../helpers/createWidget';
4+
5+
fixture
6+
.disablePageReloads`Keyboard Navigation - Column Reordering`
7+
.page(url(__dirname, '../../../container.html'));
8+
9+
const DATA_GRID_SELECTOR = '#container';
10+
11+
test('The column should be grouped when pressing Ctrl + G if grouping.contextMenuEnabled is false', async (t) => {
12+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
13+
const firstVisibleHeader = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0);
14+
15+
await t
16+
.click(firstVisibleHeader.element)
17+
.pressKey('ctrl+g');
18+
19+
await t
20+
.expect(dataGrid.getGroupPanel().getHeadersCount())
21+
.eql(1)
22+
.expect(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(1).isFocused)
23+
.ok();
24+
}).before(async () => {
25+
await createWidget('dxDataGrid', {
26+
width: 550,
27+
columnWidth: 100,
28+
grouping: {
29+
contextMenuEnabled: false,
30+
},
31+
groupPanel: {
32+
visible: true,
33+
},
34+
dataSource: [{
35+
field1: 'test1',
36+
field2: 'test2',
37+
field3: 'test3',
38+
field4: 'test4',
39+
}],
40+
});
41+
});
42+
43+
test('The column should not be grouped when pressing Ctrl + G if keyboardNavigation.enabled is false', async (t) => {
44+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
45+
const firstVisibleHeader = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0);
46+
47+
await t
48+
.click(firstVisibleHeader.element)
49+
.pressKey('ctrl+g');
50+
51+
await t
52+
.expect(dataGrid.getGroupPanel().getHeadersCount())
53+
.eql(0)
54+
.expect(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0).isFocused)
55+
.ok();
56+
}).before(async () => {
57+
await createWidget('dxDataGrid', {
58+
width: 550,
59+
columnWidth: 100,
60+
keyboardNavigation: {
61+
enabled: false,
62+
},
63+
groupPanel: {
64+
visible: true,
65+
},
66+
dataSource: [{
67+
field1: 'test1',
68+
field2: 'test2',
69+
field3: 'test3',
70+
field4: 'test4',
71+
}],
72+
});
73+
});
74+
75+
// Group columns when adaptability is enabled
76+
test('Group column when pressing Ctrl + G if adaptability is enabled', async (t) => {
77+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
78+
const firstVisibleHeader = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(1);
79+
80+
await t
81+
.click(firstVisibleHeader.element)
82+
.pressKey('ctrl+g');
83+
84+
await t
85+
.expect(dataGrid.getGroupPanel().getHeadersCount())
86+
.eql(1)
87+
.expect(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(4).isFocused)
88+
.ok();
89+
}).before(async () => {
90+
await createWidget('dxDataGrid', {
91+
width: 550,
92+
columnWidth: 100,
93+
allowColumnReordering: true,
94+
groupPanel: {
95+
visible: true,
96+
},
97+
dataSource: [{
98+
field1: 'test1',
99+
field2: 'test2',
100+
field3: 'test3',
101+
field4: 'test4',
102+
field5: 'test5',
103+
field6: 'test6',
104+
field7: 'test7',
105+
field8: 'test8',
106+
}],
107+
customizeColumns: (columns) => {
108+
columns[0].hidingPriority = 0;
109+
columns[2].hidingPriority = 1;
110+
columns[3].hidingPriority = 2;
111+
},
112+
});
113+
});
114+
115+
test('Group column with showWhenGrouped enabled when pressing Ctrl + G if adaptability is enabled', async (t) => {
116+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
117+
const firstVisibleHeader = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(1);
118+
119+
await t
120+
.click(firstVisibleHeader.element)
121+
.pressKey('ctrl+g');
122+
123+
await t
124+
.expect(dataGrid.getGroupPanel().getHeadersCount())
125+
.eql(1)
126+
.expect(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(2).isFocused)
127+
.ok();
128+
}).before(async () => {
129+
await createWidget('dxDataGrid', {
130+
width: 550,
131+
columnWidth: 100,
132+
allowColumnReordering: true,
133+
groupPanel: {
134+
visible: true,
135+
},
136+
dataSource: [{
137+
field1: 'test1',
138+
field2: 'test2',
139+
field3: 'test3',
140+
field4: 'test4',
141+
field5: 'test5',
142+
field6: 'test6',
143+
field7: 'test7',
144+
field8: 'test8',
145+
}],
146+
customizeColumns: (columns) => {
147+
columns[1].showWhenGrouped = true;
148+
149+
columns[0].hidingPriority = 0;
150+
columns[2].hidingPriority = 1;
151+
columns[3].hidingPriority = 2;
152+
},
153+
});
154+
});
155+
156+
test('Ungroup column with showWhenGrouped enabled when pressing Ctrl + Shift + G if adaptability is enabled', async (t) => {
157+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
158+
const firstVisibleHeader = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(2);
159+
160+
await t
161+
.click(firstVisibleHeader.element)
162+
.pressKey('ctrl+shift+g');
163+
164+
await t
165+
.expect(dataGrid.getGroupPanel().getHeadersCount())
166+
.eql(0)
167+
.expect(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(1).isFocused)
168+
.ok();
169+
}).before(async () => {
170+
await createWidget('dxDataGrid', {
171+
width: 550,
172+
columnWidth: 100,
173+
allowColumnReordering: true,
174+
groupPanel: {
175+
visible: true,
176+
},
177+
dataSource: [{
178+
field1: 'test1',
179+
field2: 'test2',
180+
field3: 'test3',
181+
field4: 'test4',
182+
field5: 'test5',
183+
field6: 'test6',
184+
field7: 'test7',
185+
field8: 'test8',
186+
}],
187+
customizeColumns: (columns) => {
188+
columns[1].showWhenGrouped = true;
189+
columns[1].groupIndex = 0;
190+
191+
columns[0].hidingPriority = 0;
192+
columns[2].hidingPriority = 1;
193+
columns[3].hidingPriority = 2;
194+
},
195+
});
196+
});
197+
198+
// Group nested columns
199+
test('Group first nested column when pressing Ctrl + G', async (t) => {
200+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
201+
const nestedFirstHeader = dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0);
202+
203+
await t
204+
.click(nestedFirstHeader.element)
205+
.pressKey('ctrl+g');
206+
207+
await t
208+
.expect(dataGrid.getGroupPanel().getHeadersCount())
209+
.eql(1)
210+
.expect(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0).isFocused)
211+
.ok();
212+
}).before(async () => {
213+
await createWidget('dxDataGrid', {
214+
dataSource: [{
215+
field1: 'test1',
216+
field2: 'test2',
217+
field3: 'test3',
218+
field4: 'test4',
219+
field5: 'test5',
220+
}],
221+
grouping: {
222+
contextMenuEnabled: true,
223+
},
224+
groupPanel: {
225+
visible: true,
226+
},
227+
columns: [
228+
'field1',
229+
{
230+
caption: 'Band Column',
231+
columns: ['field2', 'field3', 'field4'],
232+
},
233+
'field5',
234+
],
235+
});
236+
});
237+
238+
test('Group last nested column when pressing Ctrl + G', async (t) => {
239+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
240+
const nestedLastHeader = dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(2);
241+
242+
await t
243+
.click(nestedLastHeader.element)
244+
.pressKey('ctrl+g');
245+
246+
await t
247+
.expect(dataGrid.getGroupPanel().getHeadersCount())
248+
.eql(1)
249+
.expect(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(1).isFocused)
250+
.ok();
251+
}).before(async () => {
252+
await createWidget('dxDataGrid', {
253+
dataSource: [{
254+
field1: 'test1',
255+
field2: 'test2',
256+
field3: 'test3',
257+
field4: 'test4',
258+
field5: 'test5',
259+
}],
260+
grouping: {
261+
contextMenuEnabled: true,
262+
},
263+
groupPanel: {
264+
visible: true,
265+
},
266+
columns: [
267+
'field1',
268+
{
269+
caption: 'Band Column',
270+
columns: ['field2', 'field3', 'field4'],
271+
},
272+
'field5',
273+
],
274+
});
275+
});
276+
277+
test('Group single nested column when pressing Ctrl + G', async (t) => {
278+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
279+
const nestedLastHeader = dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0);
280+
281+
await t
282+
.click(nestedLastHeader.element)
283+
.pressKey('ctrl+g');
284+
285+
await t
286+
.expect(dataGrid.getGroupPanel().getHeadersCount())
287+
.eql(1)
288+
.expect(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(3).isFocused)
289+
.ok();
290+
}).before(async () => {
291+
await createWidget('dxDataGrid', {
292+
dataSource: [{
293+
field1: 'test1',
294+
field2: 'test2',
295+
field3: 'test3',
296+
}],
297+
grouping: {
298+
contextMenuEnabled: true,
299+
},
300+
groupPanel: {
301+
visible: true,
302+
},
303+
columns: [
304+
'field1',
305+
{
306+
caption: 'Band Column',
307+
columns: ['field2'],
308+
},
309+
'field3',
310+
],
311+
});
312+
});
313+
314+
test('Group nested column when pressing Ctrl + G if adaptability is enabled', async (t) => {
315+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
316+
const firstVisibleNestedHeader = dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(2);
317+
318+
await t
319+
.click(firstVisibleNestedHeader.element)
320+
.pressKey('ctrl+g');
321+
322+
await t
323+
.expect(dataGrid.getGroupPanel().getHeadersCount())
324+
.eql(1)
325+
.expect(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(4).isFocused)
326+
.ok();
327+
}).before(async () => {
328+
await createWidget('dxDataGrid', {
329+
width: 550,
330+
columnWidth: 100,
331+
allowColumnReordering: true,
332+
dataSource: [{
333+
field1: 'test1',
334+
field2: 'test2',
335+
field3: 'test3',
336+
field4: 'test4',
337+
field5: 'test5',
338+
field6: 'test6',
339+
field7: 'test7',
340+
field8: 'test8',
341+
field9: 'test9',
342+
}],
343+
groupPanel: {
344+
visible: true,
345+
},
346+
columns: [
347+
'field1',
348+
{
349+
caption: 'Band column 1',
350+
columns: [
351+
{
352+
dataField: 'field2',
353+
hidingPriority: 0,
354+
},
355+
'field3',
356+
'field4',
357+
{
358+
dataField: 'field5',
359+
hidingPriority: 1,
360+
},
361+
{
362+
dataField: 'field6',
363+
hidingPriority: 2,
364+
},
365+
'field7',
366+
{
367+
dataField: 'field8',
368+
hidingPriority: 3,
369+
},
370+
],
371+
},
372+
'field9',
373+
],
374+
});
375+
});

0 commit comments

Comments
 (0)