DataGrid: Fix the banded Columns' vertical borders (T1318812) by Alyar666 · Pull Request #32802 · DevExpress/DevExtreme

Alyar666 · 2026-03-05T13:48:38Z

No description provided.

Copilot

Pull request overview

Copilot reviewed 25 out of 25 changed files in this pull request and generated 3 comments.

packages/devextreme/js/__internal/grids/grid_core/column_headers/m_column_headers.ts

Copilot · 2026-03-10T13:25:02Z

packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts

+    this.setStickyOffsets();
+
+    if (columnHidingEnabled) {
+      this.updateColumnNoBorderClasses();


updateColumnNoBorderClasses() walks all rendered rows/cells and calls needToRemoveColumnBorder per cell. After this change it runs on every _resizeCore() whenever columnHidingEnabled is true, even when no columns are actually being hidden, which can add significant resize overhead on large grids. Consider restoring a guard similar to the previous adaptiveColumns.getHidingColumnsQueue().length/hasHiddenColumns() check before doing the full traversal.

packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts

Copilot

Pull request overview

Copilot reviewed 25 out of 25 changed files in this pull request and generated 4 comments.

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

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

+  .dx-widget:not(.dx-rtl) .dx-row > td.dx-#{$widget-name}-group-space + td,
+  .dx-widget:not(.dx-rtl) .dx-row > tr > td.dx-#{$widget-name}-group-space + td {


packages/devextreme/js/__internal/grids/grid_core/column_headers/m_column_headers.ts

    const $cellElement = super._createCell.apply(this, arguments);
+    const rowCount = this.getRowCount();
+
+    if (rowCount > 1) {


packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts

Copilot

Pull request overview

Copilot reviewed 18 out of 18 changed files in this pull request and generated 3 comments.

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


 // (0,7,1)
-.dx-treelist .dx-treelist-sticky-columns .dx-treelist-content .dx-treelist-table .dx-row.dx-column-lines > td.dx-treelist-first-header {
+.dx-treelist:not(.dx-rtl) > .dx-gridbase-container > .dx-header-multi-row .dx-datagrid-table .dx-row > td.dx-treelist-first-header {


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

-// (0,8,1)
-.dx-rtl.dx-treelist .dx-treelist-sticky-columns .dx-treelist-content .dx-treelist-table .dx-row.dx-column-lines > td.dx-treelist-first-header {
+// (0,7,1)
+.dx-rtl > .dx-gridbase-container > .dx-header-multi-row .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-datagrid-first-header {


packages/devextreme/testing/helpers/gridBaseMocks.js

                return true;
            },

+            isFirstColumn: function() {


Copilot

Pull request overview

Copilot reviewed 18 out of 18 changed files in this pull request and generated no new comments.

Copilot

Pull request overview

Copilot reviewed 18 out of 159 changed files in this pull request and generated 4 comments.

packages/devextreme/js/__internal/grids/grid_core/column_headers/m_column_headers.ts

+    const rowCount = this.getRowCount();
+
+    if (rowCount > 1) {
+      this.toggleFirstHeaderClass($cellElement, column, options.rowIndex);
+    }


packages/devextreme/js/__internal/grids/grid_core/column_headers/m_column_headers.ts

+  private updateFirstHeaderClasses(): void {
+    const $rows = this._getRowElementsCore().toArray();
+
+    $rows.forEach((row: Element, rowIndex: number) => {
+      const $cells = $(row).children('td').toArray();
+      const columns = this.getColumns(rowIndex);
+
+      $cells.forEach((cell: Element, cellIndex: number) => {
+        const $cell = $(cell);
+        const column = columns[cellIndex];
+
+        if (column) {
+          this.toggleFirstHeaderClass($cell, column, rowIndex);
+        }
+      });
+    });
+  }


packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts

+  protected _resizeCore(): void {
    const hasStickyColumns = this.hasStickyColumns();
-    const adaptiveColumns = this.getController('adaptiveColumns');
-    const hidingColumnsQueue = adaptiveColumns?.getHidingColumnsQueue();
+    const columnHidingEnabled = this.option('columnHidingEnabled');

-    super._resizeCore.apply(this, arguments as any);
+    super._resizeCore.apply(this);

-    if (hasStickyColumns) {
-      this.setStickyOffsets();
+    if (!hasStickyColumns) {
+      return;
+    }

-      if (hidingColumnsQueue?.length) {
-        this._updateBorderClasses();
-      }
+    this.setStickyOffsets();
+
+    if (columnHidingEnabled) {
+      this.updateColumnNoBorderClasses();
    }


packages/devextreme/js/__internal/grids/grid_core/column_headers/m_column_headers.ts

+  protected _resizeCore(): void {
+    const rowCount = this.getRowCount();
+    const columnHidingEnabled = this.option('columnHidingEnabled');
+
+    super._resizeCore.apply(this);
+
+    if (rowCount > 1 && columnHidingEnabled) {
+      this.updateFirstHeaderClasses();
+    }


Copilot

Pull request overview

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

packages/devextreme/js/__internal/grids/grid_core/column_headers/m_column_headers.ts

+  private updateFirstHeaderClasses(): void {
+    const $rows = this._getRowElementsCore().toArray();
+
+    $rows.forEach((row: Element, rowIndex: number) => {
+      const $cells = $(row).children('td').toArray();
+      const columns = this.getColumns(rowIndex);
+
+      $cells.forEach((cell: Element, cellIndex: number) => {
+        const $cell = $(cell);
+        const column = columns[cellIndex];
+
+        if (column) {
+          this.toggleFirstHeaderClass($cell, column, rowIndex);
+        }
+      });
+    });
+  }


… selectors The border-left/border-right rules for multi-row headers incorrectly targeted all .dx-row elements inside the headers container. This caused filter row cells to get unexpected borders when band columns were present and showColumnHeaders was false. Narrowing the selector to .dx-header-row ensures only actual header rows are affected.

Copilot

Pull request overview

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

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

+  public getHeaderCells(rowIndex = 0): NodeListOf<HTMLElement> {
+    return this.getHeaderRows()[rowIndex].querySelectorAll('td');
+  }


Alyar666 self-assigned this Mar 5, 2026

Copilot AI review requested due to automatic review settings March 5, 2026 13:48

Alyar666 requested a review from a team as a code owner March 5, 2026 13:48

Alyar666 added skip-cache force all tests 26_1 labels Mar 5, 2026

Copilot started reviewing on behalf of Alyar666 March 5, 2026 13:49 View session

This comment was marked as outdated.

Sign in to view

Copilot AI review requested due to automatic review settings March 10, 2026 13:15

Alyar666 force-pushed the T1318812_26_1_attempt_3 branch from 88936f8 to ccd2691 Compare March 10, 2026 13:15

Copilot started reviewing on behalf of Alyar666 March 10, 2026 13:16 View session

Copilot AI reviewed Mar 10, 2026

View reviewed changes

Alyar666 force-pushed the T1318812_26_1_attempt_3 branch from ccd2691 to 2899a74 Compare March 16, 2026 09:55

Copilot AI review requested due to automatic review settings March 16, 2026 10:24

Copilot started reviewing on behalf of Alyar666 March 16, 2026 10:25 View session

Copilot AI reviewed Mar 16, 2026

View reviewed changes

Alyar666 force-pushed the T1318812_26_1_attempt_3 branch from 77856d4 to d98ceff Compare March 17, 2026 09:24

Copilot AI review requested due to automatic review settings March 17, 2026 12:10

Copilot started reviewing on behalf of Alyar666 March 17, 2026 12:10 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

Alyar666 force-pushed the T1318812_26_1_attempt_3 branch from 04062b7 to a784fb8 Compare March 17, 2026 22:03

Copilot AI review requested due to automatic review settings March 17, 2026 22:03

Copilot started reviewing on behalf of Alyar666 March 17, 2026 22:04 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings March 18, 2026 17:22

Copilot started reviewing on behalf of Alyar666 March 18, 2026 17:27 View session

Copilot AI reviewed Mar 18, 2026

View reviewed changes

Alyar added 3 commits March 19, 2026 01:15

Revert the fix for T1282595

74f3dfe

separate TestCafe tests into functional and visual tests

2062535

Move first-header class logic from sticky_columns to column_headers

486f91e

Alyar added 5 commits March 19, 2026 01:15

Fix lint: use for-of loops in matrix functional test

07e1aa4

Fix e2e tests (part 1)

de9b67f

Update etalons

c443aad

Update etalons (part 2)

2aff857

Fix e2e tests

f9562be

Copilot AI review requested due to automatic review settings March 18, 2026 21:15

Alyar666 force-pushed the T1318812_26_1_attempt_3 branch from be6ac0c to f9562be Compare March 18, 2026 21:15

Copilot AI reviewed Mar 18, 2026

View reviewed changes

Alyar added 3 commits March 19, 2026 02:31

Update etalons (part 3)

242505a

Update etalons (part 4)

86f6c2f

Copilot AI review requested due to automatic review settings March 19, 2026 08:36

Copilot AI reviewed Mar 19, 2026

View reviewed changes

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

Comment on lines +56 to +58

public getHeaderCells(rowIndex = 0): NodeListOf<HTMLElement> {

return this.getHeaderRows()[rowIndex].querySelectorAll('td');

}

Update etalons (part 5)

0929754

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Alyar666 commented Mar 5, 2026

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		.dx-widget:not(.dx-rtl) .dx-row > td.dx-#{$widget-name}-group-space + td,
		.dx-widget:not(.dx-rtl) .dx-row > tr > td.dx-#{$widget-name}-group-space + td {

Conversation

Alyar666 commented Mar 5, 2026

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants