Skip to content

DataGrid: Fix the banded Columns' vertical borders (T1318812)#32802

Open
Alyar666 wants to merge 3 commits intoDevExpress:26_1from
Alyar666:T1318812_26_1_attempt_3
Open

DataGrid: Fix the banded Columns' vertical borders (T1318812)#32802
Alyar666 wants to merge 3 commits intoDevExpress:26_1from
Alyar666:T1318812_26_1_attempt_3

Conversation

@Alyar666
Copy link
Contributor

@Alyar666 Alyar666 commented Mar 5, 2026

No description provided.

@Alyar666 Alyar666 self-assigned this Mar 5, 2026
Copilot AI review requested due to automatic review settings March 5, 2026 13:48
@Alyar666 Alyar666 requested a review from a team as a code owner March 5, 2026 13:48
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR fixes missing/incorrect vertical borders for banded (multi-row) DataGrid header cells across themes, and adds E2E coverage to prevent visual regressions.

Changes:

  • Updated Material/Generic/Fluent SCSS to render vertical borders for multi-row header cells when column lines are disabled, including RTL-specific handling.
  • Reorganized band-columns E2E tests by separating functional coverage and adding a new screenshot “matrix” test for RTL/LTR × showColumnLines combinations.
  • Renamed the existing visual fixture and removed the unrelated functional scenario from the visual test file.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
packages/devextreme-scss/scss/widgets/material/gridBase/layout/cell.scss Adjust multi-row header border rules and add RTL override to fix band header vertical borders.
packages/devextreme-scss/scss/widgets/generic/gridBase/layout/cell.scss Add multi-row header border rules + RTL override for consistent band header borders.
packages/devextreme-scss/scss/widgets/fluent/gridBase/layout/cell.scss Replace previous multi-row header border logic with new border rules + RTL override.
e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/visual.ts Keep only visual runtime-change scenario; rename fixture; remove unrelated functional test.
e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/matrix.ts Add screenshot matrix coverage for vertical borders across showColumnLines/rtlEnabled permutations.
e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/functional.ts Move the columnOption/dataField functional regression test into a dedicated functional file.

Comment on lines +26 to +33
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();
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants