Skip to content

Commit 2899a74

Browse files
author
Alyar
committed
DataGrid: Refactor first-header class to support multi-row headers
1 parent cb23780 commit 2899a74

File tree

16 files changed

+422
-174
lines changed

16 files changed

+422
-174
lines changed

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,49 @@ test('Changing dataField for a banded column with the columnOption method does n
7575
},
7676
}, '#otherContainer');
7777
});
78+
79+
test('The first header class should update correctly when the first data column is hidden in responsive mode', async (t) => {
80+
const dataGrid = new DataGrid(GRID_CONTAINER);
81+
const firstHeaderRow = dataGrid.getHeaders().getHeaderRow(0);
82+
const secondHeaderRow = dataGrid.getHeaders().getHeaderRow(1);
83+
84+
await t
85+
.expect(dataGrid.isReady()).ok()
86+
.expect(firstHeaderRow.getHeaderCell(0).isFirstHeader)
87+
.ok()
88+
.expect(firstHeaderRow.getHeaderCell(2).isFirstHeader)
89+
.notOk()
90+
.expect(secondHeaderRow.getHeaderCell(0).isFirstHeader)
91+
.ok()
92+
.expect(secondHeaderRow.getHeaderCell(1).isFirstHeader)
93+
.notOk();
94+
95+
await dataGrid.apiOption('width', 275);
96+
97+
await t
98+
.expect(firstHeaderRow.getHeaderCell(0).isFirstHeader)
99+
.ok()
100+
.expect(firstHeaderRow.getHeaderCell(2).isFirstHeader)
101+
.notOk()
102+
.expect(secondHeaderRow.getHeaderCell(0).isFirstHeader)
103+
.notOk()
104+
.expect(secondHeaderRow.getHeaderCell(1).isFirstHeader)
105+
.ok();
106+
}).before(async () => {
107+
await createWidget('dxDataGrid', {
108+
width: 350,
109+
columnWidth: 100,
110+
columnHidingEnabled: true,
111+
dataSource: [{ field1: 1, field2: 2, field3: 3 }],
112+
columns: [
113+
{
114+
caption: 'Band 1',
115+
columns: [
116+
{ dataField: 'field1', hidingPriority: 0 },
117+
{ dataField: 'field2', hidingPriority: 1 },
118+
],
119+
},
120+
{ dataField: 'field3', hidingPriority: 2 },
121+
],
122+
});
123+
});

‎e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/matrix.ts‎

Lines changed: 75 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid';
33
import url from '../../../../helpers/getPageUrl';
44
import { createWidget } from '../../../../helpers/createWidget';
55
import { testScreenshot } from '../../../../helpers/themeUtils';
6+
import { Themes } from '../../../../helpers/themes';
67

78
fixture.disablePageReloads`Band columns.Matrix`
89
.page(url(__dirname, '../../../container.html'));
@@ -26,7 +27,7 @@ const configs = [{
2627
configs.forEach((
2728
{ showColumnLines, rtlEnabled }: { showColumnLines: boolean; rtlEnabled: boolean; },
2829
): void => {
29-
test('test', async (t) => {
30+
test.meta({ themes: [Themes.materialBlue, Themes.genericLight] })(`The grid with grouped and fixed columns should display correct vertical borders when showColumnLines=${showColumnLines} and rtl=${rtlEnabled}(T1318812)`, async (t) => {
3031
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
3132
const dataGrid = new DataGrid(GRID_CONTAINER);
3233

@@ -35,7 +36,7 @@ configs.forEach((
3536
await testScreenshot(
3637
t,
3738
takeScreenshot,
38-
`T1318812__datagrid__band-columns__vertical-borders(showColumnLines=${showColumnLines},rtl=${rtlEnabled}).png`,
39+
`T1318812__datagrid__band-and-grouped-and-fixed-columns__vertical-borders(showColumnLines=${showColumnLines},rtl=${rtlEnabled}).png`,
3940
{ element: dataGrid.element },
4041
);
4142

@@ -98,4 +99,76 @@ configs.forEach((
9899
columnWidth: 100,
99100
});
100101
});
102+
103+
test.meta({ themes: [Themes.materialBlue, Themes.genericLight] })(`The grid should display correct vertical borders when showColumnLines=${showColumnLines} and rtl=${rtlEnabled}(T1318812)`, async (t) => {
104+
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
105+
const dataGrid = new DataGrid(GRID_CONTAINER);
106+
107+
await t.expect(dataGrid.isReady()).ok();
108+
109+
await testScreenshot(
110+
t,
111+
takeScreenshot,
112+
`T1318812__datagrid__band-columns__vertical-borders(showColumnLines=${showColumnLines},rtl=${rtlEnabled}).png`,
113+
{ element: dataGrid.element },
114+
);
115+
116+
await t.expect(compareResults.isValid())
117+
.ok(compareResults.errorMessages());
118+
}).before(async () => {
119+
await createWidget('dxDataGrid', {
120+
dataSource: [
121+
{
122+
Col1: 'Data A', Col2: 'Desc A', Col3: 'Group 1', Col4: 'X', Col5: 100, Col6: 50,
123+
},
124+
{
125+
Col1: 'Data B', Col2: 'Desc B', Col3: 'Group 1', Col4: 'Y', Col5: 200, Col6: 20,
126+
},
127+
{
128+
Col1: 'Data C', Col2: 'Desc C', Col3: 'Group 2', Col4: 'Z', Col5: 300, Col6: 10,
129+
},
130+
],
131+
columns: [
132+
'Col1',
133+
{
134+
caption: 'Band Column 1',
135+
columns: [
136+
{
137+
caption: 'Nested BandColumn 1',
138+
columns: [
139+
{ dataField: 'Col2', width: 300 },
140+
{ dataField: 'Col3', width: 300 },
141+
],
142+
},
143+
],
144+
},
145+
{
146+
caption: 'Band Column 2',
147+
columns: [
148+
{
149+
caption: 'Nested Band Column 2',
150+
columns: [
151+
{ dataField: 'Col4', width: 120 },
152+
],
153+
},
154+
],
155+
},
156+
{
157+
caption: 'Band Column 3',
158+
columns: [
159+
{
160+
caption: 'Nested Band Column 3',
161+
columns: [
162+
{ dataField: 'Col5', width: 150 },
163+
{ dataField: 'Col6', width: 150 },
164+
],
165+
},
166+
],
167+
},
168+
],
169+
showColumnLines,
170+
rtlEnabled,
171+
columnWidth: 100,
172+
});
173+
});
101174
});

‎packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss‎

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ $datagrid-focused-border-color: null !default;
5656
border-right-color: $datagrid-border-color;
5757
}
5858

59-
// (0,4,1)
59+
// (0,4,1) TODO: remove redundant rules
6060
.dx-header-multi-row.dx-datagrid-sticky-columns .dx-column-lines > td:first-child {
6161
border-left: $datagrid-border;
6262
border-left-color: $datagrid-border-color;
@@ -97,13 +97,13 @@ $datagrid-focused-border-color: null !default;
9797
border-left-color: $datagrid-border-color;
9898
}
9999

100-
// (0,6,0)
101-
.dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row .dx-datagrid-column-no-border {
100+
// (0,6,1)
101+
.dx-widget:not(.dx-rtl) .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-datagrid-first-header {
102102
border-left: none;
103103
}
104104

105-
// (0,7,1)
106-
.dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row.dx-column-lines > td.dx-datagrid-first-header {
105+
// (0,7,0)
106+
.dx-widget:not(.dx-rtl) .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row .dx-datagrid-column-no-border {
107107
border-left: none;
108108
}
109109

@@ -192,28 +192,16 @@ $datagrid-focused-border-color: null !default;
192192
border-left-color: $datagrid-border-color;
193193
}
194194

195-
// (0,7,0)
196-
.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row .dx-datagrid-column-no-border {
195+
// (0,6,1)
196+
.dx-rtl .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-datagrid-first-header {
197197
border-right: none;
198198
}
199199

200-
// (0,8,0)
201-
.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row .dx-datagrid-column-no-border.dx-datagrid-sticky-column-border-left {
202-
border-left: 2px solid;
203-
border-left-color: $datagrid-border-color;
204-
}
205-
206-
// (0,8,1)
207-
.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row.dx-column-lines > td.dx-datagrid-first-header {
200+
// (0,7,0)
201+
.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row .dx-datagrid-column-no-border {
208202
border-right: none;
209203
}
210204

211-
// (0,9,1)
212-
.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row.dx-column-lines > td.dx-datagrid-first-header.dx-datagrid-sticky-column-border-left {
213-
border-left: 2px solid;
214-
border-left-color: $datagrid-border-color;
215-
}
216-
217205
// #endregion
218206

219207
// #region padding

‎packages/devextreme-scss/scss/widgets/base/gridBase/layout/cell.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -190,8 +190,8 @@
190190
}
191191

192192
// (0,4,2)
193-
.dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-group-space + td,
194-
.dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > tr > td.dx-#{$widget-name}-group-space + td {
193+
.dx-widget:not(.dx-rtl) .dx-row > td.dx-#{$widget-name}-group-space + td,
194+
.dx-widget:not(.dx-rtl) .dx-row > tr > td.dx-#{$widget-name}-group-space + td {
195195
border-left: none;
196196
}
197197

‎packages/devextreme-scss/scss/widgets/base/treeList/layout/cell.scss‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,13 @@ $treelist-focused-border-color: null !default;
8080
border-left-color: $treelist-border-color;
8181
}
8282

83-
// (0,6,0)
84-
.dx-treelist .dx-treelist-sticky-columns .dx-treelist-content .dx-treelist-table .dx-row .dx-treelist-column-no-border {
83+
// (0,6,1)
84+
.dx-treelist:not(.dx-rtl) .dx-treelist-content .dx-treelist-table .dx-row > td.dx-treelist-first-header {
8585
border-left: none;
8686
}
8787

88-
// (0,7,1)
89-
.dx-treelist .dx-treelist-sticky-columns .dx-treelist-content .dx-treelist-table .dx-row.dx-column-lines > td.dx-treelist-first-header {
88+
// (0,7,0)
89+
.dx-treelist:not(.dx-rtl) .dx-treelist-sticky-columns .dx-treelist-content .dx-treelist-table .dx-row .dx-treelist-column-no-border {
9090
border-left: none;
9191
}
9292

@@ -153,28 +153,16 @@ $treelist-focused-border-color: null !default;
153153
border-left: none;
154154
}
155155

156-
// (0,7,0)
157-
.dx-rtl.dx-treelist .dx-treelist-sticky-columns .dx-treelist-content .dx-treelist-table .dx-row .dx-treelist-column-no-border {
156+
// (0,6,1)
157+
.dx-rtl.dx-treelist .dx-treelist-content .dx-treelist-table .dx-row > td.dx-treelist-first-header {
158158
border-right: none;
159159
}
160160

161-
// (0,8,0)
162-
.dx-rtl.dx-treelist .dx-treelist-sticky-columns .dx-treelist-content .dx-treelist-table .dx-row .dx-treelist-column-no-border.dx-treelist-sticky-column-border-left {
163-
border-left: 2px solid;
164-
border-left-color: $treelist-border-color;
165-
}
166-
167-
// (0,8,1)
168-
.dx-rtl.dx-treelist .dx-treelist-sticky-columns .dx-treelist-content .dx-treelist-table .dx-row.dx-column-lines > td.dx-treelist-first-header {
161+
// (0,7,0)
162+
.dx-rtl.dx-treelist .dx-treelist-sticky-columns .dx-treelist-content .dx-treelist-table .dx-row .dx-treelist-column-no-border {
169163
border-right: none;
170164
}
171165

172-
// (0,9,1)
173-
.dx-rtl.dx-treelist .dx-treelist-sticky-columns .dx-treelist-content .dx-treelist-table .dx-row.dx-column-lines > td.dx-treelist-first-header.dx-treelist-sticky-column-border-left {
174-
border-left: 2px solid;
175-
border-left-color: $treelist-border-color;
176-
}
177-
178166
// #endregion
179167

180168
// #region padding

‎packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/model/grid_core.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,19 @@ export abstract class GridCoreModel<TInstance = GridBase | CardView> {
4949
return this.root.querySelector(`.${SELECTORS.aiPromptEditor}`) as HTMLElement;
5050
}
5151

52-
public getHeaderCells(): NodeListOf<HTMLElement> {
53-
return this.root.querySelectorAll(`.${SELECTORS.headerRowClass} > td`);
52+
public getHeaderRows(): NodeListOf<HTMLElement> {
53+
return this.root.querySelectorAll(`.${SELECTORS.headerRowClass}`);
5454
}
5555

56-
public getHeaderCell(columnIndex: number): HeaderCellModel {
57-
return new HeaderCellModel(this.getHeaderCells()[columnIndex], this.addWidgetPrefix.bind(this));
56+
public getHeaderCells(rowIndex = 0): NodeListOf<HTMLElement> {
57+
return this.getHeaderRows()[rowIndex].querySelectorAll('td');
58+
}
59+
60+
public getHeaderCell(rowIndex = 0, columnIndex = 0): HeaderCellModel {
61+
return new HeaderCellModel(
62+
this.getHeaderCells(rowIndex)[columnIndex],
63+
this.addWidgetPrefix.bind(this),
64+
);
5865
}
5966

6067
public getAIHeaderCell(columnIndex: number): AIHeaderCellModel {

‎packages/devextreme/js/__internal/grids/grid_core/column_headers/__tests__/m_column_headers.test.ts‎

Lines changed: 0 additions & 100 deletions
This file was deleted.

0 commit comments

Comments
 (0)