anna-shakhova · Oct 6, 2026 · Oct 7, 2026 · Oct 7, 2026
@@ -2,6 +2,8 @@
 import messageLocalization from '@js/common/core/localization/message';
 import $ from '@js/core/renderer';
 import { deferUpdate } from '@js/core/utils/common';
+import type { DeferredObj } from '@js/core/utils/deferred';
+import { Deferred } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
 import { each } from '@js/core/utils/iterator';
 import { getOuterHeight, getOuterWidth } from '@js/core/utils/size';
@@ -11,6 +13,7 @@ import type { Properties as PopupProperties } from '@js/ui/popup';
 import Popup from '@js/ui/popup/ui.popup';
 import type { Item } from '@js/ui/tree_view';
 import TreeView from '@js/ui/tree_view';
+import type { DataChange } from '@ts/grids/grid_core/data_controller/types';
 import type { RowsView } from '@ts/grids/grid_core/views/m_rows_view';
 
 import type { ColumnHeadersView } from '../column_headers/m_column_headers';
@@ -213,7 +216,7 @@ export class ColumnChooserView extends ColumnsView {
     }
   }
 
-  protected _renderCore(change) {
+  protected _renderCore(change?: DataChange | 'full'): DeferredObj<unknown> {
     if (this._popupContainer) {
       const isDragMode = !this.isSelectMode();
 
@@ -223,6 +226,8 @@ export class ColumnChooserView extends ColumnsView {
         this._updateItems();
       }
     }
+
+    return Deferred<unknown>().resolve();
   }
 
   private _renderTreeView() {

@@ -8,13 +8,15 @@ import messageLocalization from '@js/common/core/localization/message';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import browser from '@js/core/utils/browser';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
 import { each } from '@js/core/utils/iterator';
 import { getBoundingRect } from '@js/core/utils/position';
 import { getOuterWidth } from '@js/core/utils/size';
 import { setWidth } from '@js/core/utils/style';
 import { isDefined } from '@js/core/utils/type';
 import Scrollable from '@js/ui/scroll_view/ui.scrollable';
+import type { DataChange } from '@ts/grids/grid_core/data_controller/types';
 import type { EditorFactory } from '@ts/grids/grid_core/editor_factory/m_editor_factory';
 
 import type { ColumnHeadersView } from '../column_headers/m_column_headers';
@@ -897,7 +899,7 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewFixedColumnsExten
     return super._getSummaryCellIndex.apply(this, arguments);
   }
 
-  protected _renderCore(change) {
+  protected _renderCore(change?: DataChange): DeferredObj<unknown> {
     this._detachHoverEvents();
 
     const deferred = super._renderCore(change);

@@ -2,40 +2,40 @@ import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { extend } from '@js/core/utils/extend';
 import { getDefaultAlignment } from '@js/core/utils/position';
+import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 
-import type { View } from '../modules/modules';
-import type { InternalGrid } from '../types';
+import type {
+  ColumnStateMixinBase,
+  ColumnStateOptions,
+  IndicatorColumnsSource,
+  IndicatorOptions,
+  IndicatorRowOptions,
+} from './types';
 
 const COLUMN_INDICATORS_CLASS = 'dx-column-indicators';
 const GROUP_PANEL_ITEM_CLASS = 'dx-group-panel-item';
 
-export interface ColumnStateMixinRequirements {
-  option: InternalGrid['option'];
-
-  component: InternalGrid;
-
-  setAria: View['setAria'];
-}
-
-export const ColumnStateMixin = <T extends new(...args: any[]) => ColumnStateMixinRequirements>(Base: T) => class extends Base {
+// eslint-disable-next-line @stylistic/max-len
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+export const ColumnStateMixin = <T extends ColumnStateMixinBase>(Base: T) => class extends Base {
   /**
    * @extended header_filter_core
    */
-  protected _applyColumnState(options) {
-    const that = this;
+  protected _applyColumnState(options: ColumnStateOptions): dxElementWrapper | undefined {
     const rtlEnabled = this.option('rtlEnabled');
-    const columnAlignment = that._getColumnAlignment(options.column.alignment, rtlEnabled);
-    const parameters = extend(true, { columnAlignment }, options);
+    const columnAlignment = this._getColumnAlignment(options.column.alignment, rtlEnabled);
+    const parameters: IndicatorOptions = extend(true, { columnAlignment }, options);
     const isGroupPanelItem = parameters.rootElement.hasClass(GROUP_PANEL_ITEM_CLASS);
-    const $indicatorsContainer = that._createIndicatorContainer(parameters, isGroupPanelItem);
-    const $span = $('<span>').addClass(that._getIndicatorClassName(options.name));
+    const $indicatorsContainer = this._createIndicatorContainer(parameters, isGroupPanelItem);
+    const $span = $('<span>').addClass(this._getIndicatorClassName(options.name) ?? '');
     // TODO getController
-    const columnsController = that.component?.getController('columns');
-    const indicatorAlignment = columnsController?.getHeaderContentAlignment(columnAlignment) || columnAlignment;
+    const columnsController = this.component?.getController('columns');
+    const indicatorAlignment = columnsController?.getHeaderContentAlignment(columnAlignment)
+      ?? columnAlignment;
 
     parameters.container = $indicatorsContainer;
     parameters.indicator = $span;
-    that._renderIndicator(parameters);
+    this._renderIndicator(parameters);
 
     $indicatorsContainer[(isGroupPanelItem || !options.showColumnLines) && indicatorAlignment === 'left' ? 'appendTo' : 'prependTo'](options.rootElement);
 
@@ -45,33 +45,41 @@ export const ColumnStateMixin = <T extends new(...args: any[]) => ColumnStateMix
   /**
    * @extended header_filter_core
    */
-  // @ts-expect-error
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected _getIndicatorClassName(name: string): string {}
+  protected _getIndicatorClassName(name: string): string | undefined {
+    return undefined;
+  }
 
   protected _getColumnAlignment(
-    alignment: string,
+    alignment: string | undefined,
     rtl = false,
   ): string {
     const rtlEnabled = rtl || this.option('rtlEnabled');
 
     return alignment && alignment !== 'center' ? alignment : getDefaultAlignment(rtlEnabled);
   }
 
-  private _createIndicatorContainer(options, ignoreIndicatorAlignment) {
+  private _createIndicatorContainer(
+    options: IndicatorOptions,
+    ignoreIndicatorAlignment: boolean,
+  ): dxElementWrapper {
     let $indicatorsContainer = this._getIndicatorContainer(options.rootElement);
     const indicatorAlignment = options.columnAlignment === 'left' ? 'right' : 'left';
+    const containerFloat = options.showColumnLines && !ignoreIndicatorAlignment
+      ? indicatorAlignment
+      : null;
 
     if (!$indicatorsContainer.length) {
       $indicatorsContainer = $('<div>').addClass(COLUMN_INDICATORS_CLASS);
     }
 
     this.setAria('role', 'presentation', $indicatorsContainer);
 
-    return $indicatorsContainer.css('float', options.showColumnLines && !ignoreIndicatorAlignment ? indicatorAlignment : null);
+    // @ts-expect-error css() is typed without null
+    return $indicatorsContainer.css('float', containerFloat);
   }
 
-  protected _getIndicatorContainer($cell) {
+  protected _getIndicatorContainer($cell: dxElementWrapper): dxElementWrapper {
     return $cell && $cell.find(`.${COLUMN_INDICATORS_CLASS}`);
   }
 
@@ -88,36 +96,41 @@ export const ColumnStateMixin = <T extends new(...args: any[]) => ColumnStateMix
   /**
    * @extended header_filter_core
    */
-  protected _renderIndicator(options) {
+  protected _renderIndicator(options: IndicatorOptions): void {
     const $container = options.container;
     const $indicator = options.indicator;
 
-    $container && $indicator && $container.append($indicator);
+    if ($container && $indicator) {
+      $container.append($indicator);
+    }
   }
 
-  protected _updateIndicators(indicatorName) {
-    const that = this;
-    // @ts-expect-error
-    const columns = that.getColumns();
-    // @ts-expect-error
-    const $cells = that.getColumnElements();
-    let $cell;
+  protected _updateIndicators(this: this & IndicatorColumnsSource, indicatorName: string): void {
+    const columns = this.getColumns();
+    const $cells = this.getColumnElements();
 
-    if (!$cells || columns.length !== $cells.length) return;
+    if (!$cells || columns.length !== $cells.length) {
+      return;
+    }
 
-    for (let i = 0; i < columns.length; i++) {
-      $cell = $cells.eq(i);
-      that._updateIndicator($cell, columns[i], indicatorName);
+    for (let i = 0; i < columns.length; i += 1) {
+      const $cell = $cells.eq(i);
+      this._updateIndicator($cell, columns[i], indicatorName);
 
-      const rowOptions = $cell.parent().data('options');
+      // @ts-expect-error data(key) is typed as returning the wrapper
+      const rowOptions: IndicatorRowOptions | undefined = $cell.parent().data('options');
 
-      if (rowOptions && rowOptions.cells) {
+      if (rowOptions?.cells) {
         rowOptions.cells[$cell.index()].column = columns[i];
       }
     }
   }
 
-  protected _updateIndicator($cell, column, indicatorName): any {
+  protected _updateIndicator(
+    $cell: dxElementWrapper,
+    column: Column,
+    indicatorName: string,
+  ): dxElementWrapper | undefined {
     if (!column.command) {
       return this._applyColumnState({
         name: indicatorName,

@@ -0,0 +1,36 @@
+import type { dxElementWrapper } from '@js/core/renderer';
+import type { Column } from '@ts/grids/grid_core/columns_controller/types';
+import type { Cell } from '@ts/grids/grid_core/data_controller/types';
+import type { View } from '@ts/grids/grid_core/modules/modules';
+import type { InternalGrid } from '@ts/grids/grid_core/types';
+
+export interface ColumnStateMixinRequirements {
+  option: InternalGrid['option'];
+  component?: InternalGrid;
+  setAria: View['setAria'];
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mixin constructors need any[]
+export type ColumnStateMixinBase = new (...args: any[]) => ColumnStateMixinRequirements;
+
+export interface IndicatorColumnsSource {
+  getColumns: () => Column[];
+  getColumnElements: () => dxElementWrapper | undefined;
+}
+
+export interface ColumnStateOptions {
+  name: string;
+  rootElement: dxElementWrapper;
+  column: Column;
+  showColumnLines?: boolean;
+}
+
+export interface IndicatorOptions extends ColumnStateOptions {
+  columnAlignment: string;
+  container?: dxElementWrapper;
+  indicator?: dxElementWrapper;
+}
+
+export interface IndicatorRowOptions {
+  cells?: Cell[];
+}
@@ -2778,8 +2778,8 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewEditingExtender e
     clearTimeout(this._pointerDownTimeout);
   }
 
-  protected _renderCore() {
-    super._renderCore.apply(this, arguments as any);
+  protected _renderCore(change?: DataChange): DeferredObj<unknown> {
+    super._renderCore(change);
 
     return this.waitAsyncTemplates(true).done(() => {
       this._editingController._focusEditorIfNeed();

@@ -345,6 +345,7 @@ export class HeaderFilterController extends Modules.ViewController {
       const visibleIndex = columnsController.getVisibleIndex(columnIndex);
       // TODO getView
       const view = isGroupPanel ? this.getView('headerPanel') : this.getView('columnHeadersView');
+      // @ts-expect-error getColumnElements() is typed as possibly undefined
       const $columnElement = view.getColumnElements()
         .eq(isGroupPanel ? column.groupIndex : visibleIndex);
 
@@ -443,6 +444,8 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
     const $indicator = super._updateIndicator($cell, column, indicatorName);
 
     $indicator && this._subscribeToIndicatorEvent($indicator, column, indicatorName);
+
+    return undefined;
   }
 
   private _updateHeaderFilterIndicators() {

@@ -2,6 +2,8 @@
 import messageLocalization from '@js/common/core/localization/message';
 import $ from '@js/core/renderer';
 import { getPathParts } from '@js/core/utils/data';
+import type { DeferredObj } from '@js/core/utils/deferred';
+import { Deferred } from '@js/core/utils/deferred';
 import { isDefined } from '@js/core/utils/type';
 import type { Properties as ToolbarProperties } from '@js/ui/toolbar';
 import Toolbar from '@js/ui/toolbar';
@@ -162,7 +164,7 @@ export class HeaderPanel extends ColumnsView {
     return options.toolbarOptions;
   }
 
-  protected _renderCore() {
+  protected _renderCore(): DeferredObj<unknown> {
     if (!this._toolbar) {
       const $headerPanel = this.element();
       // @ts-expect-error the view is rendered here
@@ -176,6 +178,8 @@ export class HeaderPanel extends ColumnsView {
     } else {
       this._toolbar.option(this._toolbarOptions!);
     }
+
+    return Deferred<unknown>().resolve();
   }
 
   protected _columnOptionChanged() {

@@ -131,7 +131,7 @@ export class HeadersKeyboardNavigationController extends ColumnKeyboardNavigatio
     return this._columnHeadersView.getCellIndex($cell);
   }
 
-  protected _getCell(cellPosition): dxElementWrapper {
+  protected _getCell(cellPosition): dxElementWrapper | undefined {
     return this._columnHeadersView?.getCell(cellPosition);
   }
 

@@ -28,7 +28,7 @@ import type { KeyboardKeyDownEvent } from '@ts/events/core/keyboard_processor';
 import type { AdaptiveColumnsController } from '@ts/grids/grid_core/adaptivity/m_adaptivity';
 import type { Column } from '@ts/grids/grid_core/columns_controller/types';
 import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
-import type { RowIndexCorrection } from '@ts/grids/grid_core/data_controller/types';
+import type { DataChange, RowIndexCorrection } from '@ts/grids/grid_core/data_controller/types';
 import type { DataSourceController } from '@ts/grids/grid_core/data_source/data_source_controller';
 import type { EditingController } from '@ts/grids/grid_core/editing/m_editing';
 import type { RowsView } from '@ts/grids/grid_core/views/m_rows_view';
@@ -2585,6 +2585,7 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
   }
 
   public _fireFocusedCellChanged($cell: dxElementWrapper | undefined): void {
+    // @ts-expect-error getCellIndex() requires a cell
     const columnIndex = this._rowsView.getCellIndex($cell);
     const rowOptions: any = $cell?.parent().data('options');
     const focusedRowKey = rowOptions?.key;
@@ -2731,6 +2732,8 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
         columnIndex,
       });
     }
+
+    return undefined;
   }
 
   protected _getRowIndex($row): number {
@@ -3080,8 +3083,8 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewKeyboardExtender
     }
   }
 
-  protected _renderCore(change) {
-    const deferred = super._renderCore.apply(this, arguments as any);
+  protected _renderCore(change?: DataChange): DeferredObj<unknown> {
+    const deferred = super._renderCore(change);
     this._renderFocusByChange(change);
     return deferred;
   }

@@ -42,7 +42,8 @@ export const keyboardNavigationScrollableA11yExtender = (Base: ModuleType<Keyboa
       return;
     }
 
-    const $firstCell = this._rowsView.getCell({ rowIndex: 0, columnIndex: 0 });
+    // @ts-expect-error getCell() is typed as possibly undefined
+    const $firstCell: dxElementWrapper = this._rowsView.getCell({ rowIndex: 0, columnIndex: 0 });
     const firstCellHasTabIndex = !!$firstCell.attr('tabindex');
 
     // @ts-expect-error dxElementWrapper doesn't have overload for 'is' method