Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import Button from 'devextreme-testcafe-models/button';
import DataGrid from 'devextreme-testcafe-models/dataGrid';
import url from '../../../../helpers/getPageUrl';
import { createWidget } from '../../../../helpers/createWidget';

fixture.disablePageReloads`Band columns.Functional`
.page(url(__dirname, '../../../container.html'));

const GRID_CONTAINER = '#container';

test('Changing dataField for a banded column with the columnOption method does not work as expected (T1210340)', async (t) => {
const dataGrid = new DataGrid(GRID_CONTAINER);
const changeFieldButton = new Button('#otherContainer');

await t
.expect(dataGrid.getDataCell(0, 4).element.innerText)
.eql('2353025')
.click(changeFieldButton.element)
.expect(dataGrid.getDataCell(0, 4).element.innerText)
.eql('0.672');
}).before(async () => {
await createWidget('dxDataGrid', {
dataSource: [{
id: 1,
Country: 'Brazil',
Area: 8515767,
Population_Urban: 0.85,
Population_Rural: 0.15,
Population_Total: 205809000,
GDP_Agriculture: 0.054,
GDP_Industry: 0.274,
GDP_Services: 0.672,
GDP_Total: 2353025,
}],
columns: [
'Country',
'Area', {
caption: 'Population',
columns: [
'Population_Total',
'Population_Urban',
],
}, {
caption: 'Nominal GDP',
columns: [{
caption: 'Total, mln $',
dataField: 'GDP_Total',
name: 'GDP_Total',
}, {
caption: 'By Sector',
columns: [{
caption: 'Agriculture',
dataField: 'GDP_Agriculture',
}, {
caption: 'Industry',
dataField: 'GDP_Industry',
format: {
type: 'percent',
},
}, {
caption: 'Services',
dataField: 'GDP_Services',
}],
}],
}],
keyExpr: 'id',
showBorders: true,
});

await createWidget('dxButton', {
text: 'Change fields',
onClick() {
const grid = ($('#container') as any).dxDataGrid('instance');
grid.columnOption('GDP_Total', 'dataField', 'GDP_Services');
},
}, '#otherContainer');
});
101 changes: 101 additions & 0 deletions e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/matrix.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
import DataGrid from 'devextreme-testcafe-models/dataGrid';
import url from '../../../../helpers/getPageUrl';
import { createWidget } from '../../../../helpers/createWidget';
import { testScreenshot } from '../../../../helpers/themeUtils';

fixture.disablePageReloads`Band columns.Matrix`
.page(url(__dirname, '../../../container.html'));

const GRID_CONTAINER = '#container';

const configs = [{
showColumnLines: true,
rtlEnabled: false,
}, {
showColumnLines: true,
rtlEnabled: true,
}, {
showColumnLines: false,
rtlEnabled: false,
}, {
showColumnLines: false,
rtlEnabled: true,
}];

configs.forEach((
{ showColumnLines, rtlEnabled }: { showColumnLines: boolean; rtlEnabled: boolean; },
): void => {
test('test', async (t) => {
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
const dataGrid = new DataGrid(GRID_CONTAINER);

await t.expect(dataGrid.isReady()).ok();
Comment on lines +26 to +33
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The generated tests all use the same title ('test'). This makes TestCafe output hard to interpret and can also produce ambiguous reporting when multiple tests fail. Please use a descriptive, unique test name (e.g., include the T1318812 reference and the current showColumnLines/rtlEnabled values).

Copilot uses AI. Check for mistakes.

await testScreenshot(
t,
takeScreenshot,
`T1318812__datagrid__band-columns__vertical-borders(showColumnLines=${showColumnLines},rtl=${rtlEnabled}).png`,
{ element: dataGrid.element },
);

await t.expect(compareResults.isValid())
.ok(compareResults.errorMessages());
}).before(async () => {
await createWidget('dxDataGrid', {
dataSource: [
{
Col1: 'Data A', Col2: 'Desc A', Col3: 'Group 1', Col4: 'X', Col5: 100, Col6: 50,
},
{
Col1: 'Data B', Col2: 'Desc B', Col3: 'Group 1', Col4: 'Y', Col5: 200, Col6: 20,
},
{
Col1: 'Data C', Col2: 'Desc C', Col3: 'Group 2', Col4: 'Z', Col5: 300, Col6: 10,
},
],
columns: [
{
caption: 'Band Column 1',
columns: [
{
caption: 'Nested BandColumn 1',
columns: [
{ dataField: 'Col1', width: 150 },
{ dataField: 'Col2', width: 300 },
{ dataField: 'Col3', width: 300, groupIndex: 0 },
],
},
],
},
{
caption: 'Band Column 2',
fixed: true,
columns: [
{
caption: 'Nested Band Column 2',
columns: [
{ dataField: 'Col4', width: 120 },
],
},
],
},
{
caption: 'Band Column 3',
columns: [
{
caption: 'Nested Band Column 3',
columns: [
{ dataField: 'Col5', width: 150 },
{ dataField: 'Col6', width: 150 },
],
},
],
},
],
showColumnLines,
rtlEnabled,
columnWidth: 100,
});
});
});
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import { ClientFunction } from 'testcafe';
import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
import Button from 'devextreme-testcafe-models/button';
import DataGrid from 'devextreme-testcafe-models/dataGrid';
import url from '../../../../helpers/getPageUrl';
import { createWidget } from '../../../../helpers/createWidget';
import { testScreenshot } from '../../../../helpers/themeUtils';

fixture.disablePageReloads`Band columns: runtime change`
fixture.disablePageReloads`Band columns.Visual`
.page(url(__dirname, '../../../container.html'));

const GRID_CONTAINER = '#container';
Expand Down Expand Up @@ -114,71 +113,3 @@ test('Should change usual columns to band columns without error in React (T12136
showBorders: true,
});
});

test('Changing dataField for a banded column with the columnOption method does not work as expected (T1210340)', async (t) => {
const dataGrid = new DataGrid(GRID_CONTAINER);
const changeFieldButton = new Button('#otherContainer');

await t
.expect(dataGrid.getDataCell(0, 4).element.innerText)
.eql('2353025')
.click(changeFieldButton.element)
.expect(dataGrid.getDataCell(0, 4).element.innerText)
.eql('0.672');
}).before(async () => {
await createWidget('dxDataGrid', {
dataSource: [{
id: 1,
Country: 'Brazil',
Area: 8515767,
Population_Urban: 0.85,
Population_Rural: 0.15,
Population_Total: 205809000,
GDP_Agriculture: 0.054,
GDP_Industry: 0.274,
GDP_Services: 0.672,
GDP_Total: 2353025,
}],
columns: [
'Country',
'Area', {
caption: 'Population',
columns: [
'Population_Total',
'Population_Urban',
],
}, {
caption: 'Nominal GDP',
columns: [{
caption: 'Total, mln $',
dataField: 'GDP_Total',
name: 'GDP_Total',
}, {
caption: 'By Sector',
columns: [{
caption: 'Agriculture',
dataField: 'GDP_Agriculture',
}, {
caption: 'Industry',
dataField: 'GDP_Industry',
format: {
type: 'percent',
},
}, {
caption: 'Services',
dataField: 'GDP_Services',
}],
}],
}],
keyExpr: 'id',
showBorders: true,
});

await createWidget('dxButton', {
text: 'Change fields',
onClick() {
const grid = ($('#container') as any).dxDataGrid('instance');
grid.columnOption('GDP_Total', 'dataField', 'GDP_Services');
},
}, '#otherContainer');
});
Original file line number Diff line number Diff line change
Expand Up @@ -128,19 +128,19 @@
border-bottom-color: $datagrid-row-focused-bg;
}

// (0,4,1)
.dx-#{$widget-name}-headers.dx-header-multi-row .dx-row.dx-header-row > td {
border-right: 1px solid;
border-right-color: $fluent-grid-base-border-color;
}

// (0,4,1)
.dx-#{$widget-name}-rowsview .dx-row.dx-edit-row:first-child > td {
border-top-width: 0;
border-bottom: $datagrid-border;
border-bottom-color: $datagrid-border-color;
}

// (0,4,1)
.dx-#{$widget-name}-headers.dx-header-multi-row .dx-header-row:not(.dx-column-lines) > td {
border-left: 1px solid;
border-left-color: $datagrid-border-color;
}

// (0,4,1) - (0,5,1)
.dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row-removed.dx-row-lines > td,
.dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-lines.dx-edit-row > td {
Expand Down Expand Up @@ -179,22 +179,6 @@
border-bottom-color: $datagrid-row-selected-border-color;
}

// (0,7,1)
.dx-#{$widget-name}-headers.dx-header-multi-row:not(.dx-#{$widget-name}-sticky-columns) .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row > td {
border-left: 1px solid;
border-left-color: $fluent-grid-base-border-color;
}

// (0,8,1)
.dx-#{$widget-name}-headers.dx-header-multi-row:not(.dx-#{$widget-name}-sticky-columns) .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row > td:first-child {
border-left: none;
}

// (0,8,1)
.dx-#{$widget-name}-headers.dx-header-multi-row:not(.dx-#{$widget-name}-sticky-columns) .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row > td:last-child {
border-right: none;
}

// (0,10,1)
.dx-rtl .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused).dx-#{$widget-name}-group-space {
border-left-color: $datagrid-hover-bg;
Expand All @@ -211,6 +195,14 @@
border-right-color: $datagrid-row-selected-border-color;
}

// (0,5,1)
.dx-rtl .dx-#{$widget-name}-headers.dx-header-multi-row .dx-header-row:not(.dx-column-lines) > td {
border-left: none;
border-right: 1px solid;
border-right-color: $datagrid-border-color;
}


// (0,5,1) - (0,6,2)
.dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > td.dx-pointer-events-none,
.dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > tr > td.dx-pointer-events-none,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,12 @@
border-right-color: $datagrid-selection-bg;
}

// (0,4,1)
.dx-#{$widget-name}-headers.dx-header-multi-row .dx-header-row:not(.dx-column-lines) > td {
border-left: 1px solid;
border-left-color: $datagrid-border-color;
}

// (0,4,1) - (0,4,2)
.dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td.dx-pointer-events-none,
.dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td.dx-pointer-events-none,
Expand Down Expand Up @@ -278,6 +284,13 @@
border-left-color: $datagrid-row-selected-border-color;
}

// (0,5,1)
.dx-rtl .dx-#{$widget-name}-headers.dx-header-multi-row .dx-header-row:not(.dx-column-lines) > td {
border-left: none;
border-right: 1px solid;
border-right-color: $datagrid-border-color;
}

// #endregion

// #region padding
Expand Down
Loading
Loading