update first-cell classes on adaptive changes

Author: Alyar

packages/devextreme/js/__internal/grids/grid_core/adaptivity/m_adaptivity.ts

@@ -35,10 +35,10 @@ import gridCoreUtils from '../m_utils';
 import type { RowsView } from '../views/m_rows_view';
 import { getHideableColumns } from './utils';
 
-const COLUMN_HEADERS_VIEW = 'columnHeadersView';
-const ROWS_VIEW = 'rowsView';
-const FOOTER_VIEW = 'footerView';
-const COLUMN_VIEWS = [COLUMN_HEADERS_VIEW, ROWS_VIEW, FOOTER_VIEW];
+const COLUMN_HEADERS_VIEW = 'columnHeadersView' as const;
+const ROWS_VIEW = 'rowsView' as const;
+const FOOTER_VIEW = 'footerView' as const;
+const COLUMN_VIEWS = [COLUMN_HEADERS_VIEW, ROWS_VIEW, FOOTER_VIEW] as const;
 
 const ADAPTIVE_NAMESPACE = 'dxDataGridAdaptivity';
 const HIDDEN_COLUMNS_WIDTH = 'adaptiveHidden';
@@ -497,8 +497,6 @@ export class AdaptiveColumnsController extends modules.ViewController {
 
   public _showHiddenColumns() {
     for (let i = 0; i < COLUMN_VIEWS.length; i++) {
-      // TODO getView
-      // @ts-expect-error
       const view = this.getView(COLUMN_VIEWS[i]);
       if (view && view.isVisible() && view.element()) {
         const viewName = view.name;
@@ -546,8 +544,6 @@ export class AdaptiveColumnsController extends modules.ViewController {
   private _hideVisibleColumn({ isCommandColumn, visibleIndex }: any) {
     const that = this;
     COLUMN_VIEWS.forEach((viewName) => {
-      // TODO: getView
-      // @ts-expect-error
       const view = that.getView(viewName);
       view && that._hideVisibleColumnInView({ view, isCommandColumn, visibleIndex });
     });
@@ -1322,7 +1318,22 @@ const resizing = (Base: ModuleType<ResizingController>) => class AdaptivityResiz
     return super._needBestFit() || !!this._adaptiveColumnsController.getHidingColumnsQueue().length;
   }
 
-  protected _correctColumnWidths(resultWidths, visibleColumns) {
+  private updateColumnViewsFirstCellClasses(
+    oldHiddenColumns: Column[],
+    hiddenColumns: Column[],
+  ): void {
+    if (oldHiddenColumns.length !== hiddenColumns.length) {
+      COLUMN_VIEWS.forEach((viewName) => {
+        const view = this.getView(viewName);
+
+        if (view?.isVisible() && view?.needToUpdateFirstCellClasses()) {
+          view.updateFirstCellClasses();
+        }
+      });
+    }
+  }
+
+  protected _correctColumnWidths(resultWidths: (number | string | undefined)[], visibleColumns: Column[]): boolean {
     const adaptiveController = this._adaptiveColumnsController;
     const oldHiddenColumns = adaptiveController.getHiddenColumns();
     const hidingColumnsQueue = adaptiveController.updateHidingQueue(this._columnsController.getColumns());
@@ -1335,6 +1346,8 @@ const resizing = (Base: ModuleType<ResizingController>) => class AdaptivityResiz
       }
     }
 
+    this.updateColumnViewsFirstCellClasses(oldHiddenColumns, hiddenColumns);
+
     !hiddenColumns.length && adaptiveController.collapseAdaptiveDetailRow();
 
     return super._correctColumnWidths.apply(this, arguments as any);

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

@@ -359,14 +359,15 @@ export class ColumnHeadersView extends ColumnContextMenuMixin(ColumnsView) {
     const { column } = options;
     // @ts-expect-error
     const $cellElement = super._createCell.apply(this, arguments);
+    const showColumnLines = this.option('showColumnLines');
 
     if (options.rowType !== 'header') {
       return $cellElement;
     }
 
     const rowCount = this.getRowCount();
 
-    if (rowCount > 1) {
+    if (!showColumnLines && rowCount > 1) {
       this.toggleFirstCellClass(
         $cellElement,
         this._columnsController.isFirstColumn(column, options.rowIndex),
@@ -474,13 +475,6 @@ export class ColumnHeadersView extends ColumnContextMenuMixin(ColumnsView) {
     return returnAll ? $indicatorsContainer : $indicatorsContainer.filter(`:not(.${VISIBILITY_HIDDEN_CLASS})`);
   }
 
-  protected needToUpdateFirstCellClasses(): boolean {
-    const showColumnLines = this.option('showColumnLines');
-    const rowCount = this.getRowCount();
-
-    return (!showColumnLines && rowCount > 1) || super.needToUpdateFirstCellClasses();
-  }
-
   /**
    * @extended: tree_list/selection
    */

packages/devextreme/js/__internal/grids/grid_core/views/m_columns_view.ts

@@ -733,30 +733,6 @@ export class ColumnsView extends ColumnStateMixin(modules.View) {
     $cell?.toggleClass(this.addWidgetPrefix(CLASSES.firstCell), isFirstValue);
   }
 
-  protected needToUpdateFirstCellClasses(): boolean {
-    const hasHidingColumnsQueue = !!this._adaptiveColumnsController
-      ?.getHidingColumnsQueue()?.length;
-
-    return hasHidingColumnsQueue;
-  }
-
-  protected updateFirstCellClasses(): void {
-    const rows = this._getRows();
-
-    this.removeFirstCellClasses();
-
-    rows.forEach((row, index) => {
-      const rowIndex = row.rowType === 'header' ? index : null;
-      const firstColumn = this._columnsController.getFirstColumn(rowIndex);
-
-      if (firstColumn) {
-        const $cell = this._getCellElement(index, `index:${firstColumn.index}`);
-
-        this.toggleFirstCellClass($cell, true);
-      }
-    });
-  }
-
   /**
    * @extended: column_fixing, filter_row, row_dragging, virtual_columns
    */
@@ -767,10 +743,6 @@ export class ColumnsView extends ColumnStateMixin(modules.View) {
       this._scrollLeft = 0;
       this.scrollTo({ left: scrollLeft });
     }
-
-    if (this.needToUpdateFirstCellClasses()) {
-      this.updateFirstCellClasses();
-    }
   }
 
   /**
@@ -1543,4 +1515,28 @@ export class ColumnsView extends ColumnStateMixin(modules.View) {
   public renderDragCellContent($dragContainer: dxElementWrapper, column: Column): void {
     $dragContainer.text(column.caption ?? '');
   }
+
+  public needToUpdateFirstCellClasses(): boolean {
+    const hasHidingColumnsQueue = !!this._adaptiveColumnsController
+      ?.getHidingColumnsQueue()?.length;
+
+    return hasHidingColumnsQueue;
+  }
+
+  public updateFirstCellClasses(): void {
+    const rows = this._getRows();
+
+    this.removeFirstCellClasses();
+
+    rows.forEach((row, index) => {
+      const rowIndex = row.rowType === 'header' ? index : null;
+      const firstColumn = this._columnsController.getFirstColumn(rowIndex);
+
+      if (firstColumn) {
+        const $cell = this._getCellElement(index, `index:${firstColumn.index}`);
+
+        this.toggleFirstCellClass($cell, true);
+      }
+    });
+  }
 }

packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts

@@ -1187,10 +1187,6 @@ export class RowsView extends ColumnsView {
 
       deferUpdate(() => {
         this._updateScrollable();
-
-        if (this.needToUpdateFirstCellClasses()) {
-          this.updateFirstCellClasses();
-        }
       });
     });
   }