GridCore - ColumnsController - Remove usage of DataController

packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts

@@ -21,7 +21,6 @@ import filterUtils from '@js/ui/shared/filtering';
 import errors from '@js/ui/widget/ui.errors';
 import inflector from '@ts/core/utils/m_inflector';
 import type { Column, ColumnsChanges, FilterField } from '@ts/grids/grid_core/columns_controller/types';
-import type { DataController } from '@ts/grids/grid_core/data_controller/data_controller';
 
 import { AI_COLUMN_NAME } from '../ai_column/const';
 import modules from '../m_modules';
@@ -131,8 +130,6 @@ export class ColumnsController extends modules.Controller {
 
   public _columnChanges?: ColumnsChanges;
 
-  protected _dataController!: DataController;
-
   public _isWarnedAboutUnsupportedProperties?: boolean;
 
   private getCommonColumnSettings(column): Partial<Column> {
@@ -157,7 +154,6 @@ export class ColumnsController extends modules.Controller {
   }
 
   public init(isApplyingUserState?: boolean): void {
-    this._dataController = this.getController('data');
     const columns = this.option('columns');
 
     this._commandColumns = this._commandColumns || [];
@@ -1292,8 +1288,12 @@ export class ColumnsController extends modules.Controller {
     }
 
     if (!dataSource || dataSource.isLoaded()) {
-      const sortParameters = dataSource ? dataSource.sort() || [] : this.getSortDataSourceParameters();
-      const groupParameters = dataSource ? dataSource.group() || [] : this.getGroupDataSourceParameters();
+      const sortParameters = dataSource
+        ? (dataSource.sort() ?? [])
+        : this.getSortDataSourceParameters();
+      const groupParameters = dataSource
+        ? (dataSource.group() ?? [])
+        : this.getGroupDataSourceParameters();
       const filterParameters = dataSource?.lastLoadOptions().filter;
 
       if (!isApplyingUserState) {
@@ -1306,16 +1306,18 @@ export class ColumnsController extends modules.Controller {
       return when(this.refresh(true)).always(() => {
         if (this._columns !== columns) return;
 
-        this._updateChanges(dataSource, { sorting: sortParameters, grouping: groupParameters, filtering: filterParameters });
+        this._updateChanges(dataSource, {
+          sorting: sortParameters,
+          grouping: groupParameters,
+          filtering: filterParameters,
+        });
 
         fireColumnsChanged(this);
       });
     }
   }
 
   private _updateChanges(dataSource, parameters) {
-    const langParams = dataSource?.loadOptions?.()?.langParams;
-
     if (dataSource) {
       this.updateColumnDataTypes(dataSource);
       this._dataSourceApplied = true;
@@ -1328,11 +1330,10 @@ export class ColumnsController extends modules.Controller {
       updateColumnChanges(this, 'grouping');
     }
 
-    if (this._dataController
-      && !gridCoreUtils.equalFilterParameters(parameters.filtering, this._dataController.getCombinedFilter(), langParams)) {
-      updateColumnChanges(this, 'filtering');
-    }
     updateColumnChanges(this, 'columns');
+
+    this._columnChanges!.appliedFilters ??= [];
+    this._columnChanges!.appliedFilters.push(parameters.filtering);
   }
 
   public updateSortingGrouping(dataSource, fromDataSource?: boolean): void {

packages/devextreme/js/__internal/grids/grid_core/columns_controller/types.ts

@@ -61,4 +61,5 @@ export interface ColumnsChanges {
   };
   columnIndex?: number;
   columnIndices?: number[];
+  appliedFilters?: unknown[];
 }

packages/devextreme/js/__internal/grids/grid_core/data_controller/__tests__/data_controller.outdated_filter.test.ts

@@ -0,0 +1,90 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import type { Properties as DataGridProperties } from '@js/ui/data_grid';
+import type { DataGridInstance } from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid,
+  flushAsync,
+} from '@ts/grids/grid_core/__tests__/__mock__/helpers/utils';
+
+const DATA = [
+  {
+    id: 1, name: 'Alex', age: 15, city: 'Berlin',
+  },
+  {
+    id: 2, name: 'Dan', age: 20, city: 'Munich',
+  },
+];
+
+const FILTERED_COLUMNS: DataGridProperties['columns'] = [
+  { dataField: 'name', filterValue: 'Alex' },
+  'age',
+];
+
+const createGrid = async (options: DataGridProperties): Promise<{
+  instance: DataGridInstance;
+  reload: jest.Spied<() => unknown>;
+}> => {
+  const { instance } = await createDataGrid({ dataSource: DATA, ...options });
+  const reload = jest.spyOn(instance.getController('data'), 'reload');
+
+  return { instance, reload };
+};
+
+describe('DataController reload on an outdated filter', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  it('should reload when a filtered column is deleted', async () => {
+    const { instance, reload } = await createGrid({ columns: FILTERED_COLUMNS });
+
+    instance.deleteColumn('name');
+    await flushAsync();
+
+    expect(reload).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not reload when a column without a filter is deleted', async () => {
+    const { instance, reload } = await createGrid({ columns: FILTERED_COLUMNS });
+
+    instance.deleteColumn('age');
+    await flushAsync();
+
+    expect(reload).not.toHaveBeenCalled();
+  });
+
+  it('should reload when a filtered column is added', async () => {
+    const { instance, reload } = await createGrid({ columns: ['name', 'age'] });
+
+    instance.addColumn({ dataField: 'city', filterValue: 'Berlin' });
+    await flushAsync();
+
+    expect(reload).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not reload when a column without a filter is added', async () => {
+    const { instance, reload } = await createGrid({ columns: ['name', 'age'] });
+
+    instance.addColumn({ dataField: 'city' });
+    await flushAsync();
+
+    expect(reload).not.toHaveBeenCalled();
+  });
+
+  it('should not reload when the columns are updated without a filter change', async () => {
+    const { instance, reload } = await createGrid({ columns: FILTERED_COLUMNS });
+
+    instance.columnOption('age', 'width', 100);
+    await flushAsync();
+
+    expect(reload).not.toHaveBeenCalled();
+  });
+});

packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts

@@ -476,6 +476,23 @@ export class DataController extends modules.Controller {
     return hasFilterValue;
   }
 
+  private isFilterOutdated({ changeTypes, appliedFilters }: ColumnsChanges): boolean {
+    if (changeTypes.filtering) {
+      return true;
+    }
+
+    if (!appliedFilters?.length) {
+      return false;
+    }
+
+    const langParams = this._dataSource?.loadOptions?.()?.langParams;
+    const combinedFilter = this.getCombinedFilter();
+
+    return appliedFilters.some(
+      (filter) => !gridCoreUtils.equalFilterParameters(filter, combinedFilter, langParams),
+    );
+  }
+
   private columnsChangedHandler(e: ColumnsChanges): void {
     const { changeTypes, optionNames } = e;
     let filterApplied = false;
@@ -507,7 +524,7 @@ export class DataController extends modules.Controller {
       }
     }
 
-    if (!filterApplied && changeTypes.filtering && !this._needApplyFilter) {
+    if (!filterApplied && !this._needApplyFilter && this.isFilterOutdated(e)) {
       this.reload();
     }
   }

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnsController.tests.js

@@ -5468,7 +5468,8 @@ QUnit.module('Column Option', { beforeEach: setupModule, afterEach: teardownModu
         assert.strictEqual(columnsChangedCount, 1);
         assert.deepEqual(lastArgs, {
             changeTypes: { columns: true, length: 1 },
-            optionNames: { all: true, visibleWidth: true, length: 2 }
+            optionNames: { all: true, visibleWidth: true, length: 2 },
+            appliedFilters: [undefined]
         });
     });
 

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/filtering.integration.tests.js

@@ -371,7 +371,7 @@ QUnit.module('Initialization', baseModuleConfig, () => {
         } catch(err) {
             assert.ok(false, 'the error is thrown');
         } finally {
-            assert.equal(calculateFilterExpressionCallCount, 3, 'calculateFilterExpression call count');
+            assert.equal(calculateFilterExpressionCallCount, 2, 'calculateFilterExpression call count');
         }
     });
 
@@ -399,9 +399,9 @@ QUnit.module('Initialization', baseModuleConfig, () => {
             }]
         });
 
-        assert.equal(calculateFilterExpressionCallCount, 3, 'calculateFilterExpression call count');
+        assert.equal(calculateFilterExpressionCallCount, 2, 'calculateFilterExpression call count');
         assert.ok(grid.getCombinedFilter(), 'combined filter');
-        assert.equal(calculateFilterExpressionCallCount, 4, 'calculateFilterExpression call count');
+        assert.equal(calculateFilterExpressionCallCount, 3, 'calculateFilterExpression call count');
     });
 
     function createRemoteDataSourceWithGroupPaging(arrayStore, key) {