DataGrid: Fix UI update if values change in the header filter and collatorOptions are used (T1273020) (#29368)

Co-authored-by: Alyar <>

Author: Alyar666

e2e/testcafe-devextreme/tests/dataGrid/etalons/filter-method-with-case-sensitive-1.png

@@ -0,0 +1,92 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+
+fixture.disablePageReloads`Filtering`
+  .page(url(__dirname, '../../container.html'));
+
+const GRID_CONTAINER = '#container';
+
+test('Data should be filtered if True is selected via the filter method when case sensitive is enabled', async (t) => {
+  // arrange
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+
+  // act
+  await dataGrid.apiFilter(['text', '=', 'true']);
+
+  // assert
+  await t.expect(dataGrid.isReady()).ok();
+
+  await takeScreenshot('filter-method-with-case-sensitive-1.png', dataGrid.element);
+
+  // act
+  await dataGrid.apiFilter(['text', '=', 'True']);
+
+  // assert
+  await t.expect(dataGrid.isReady()).ok();
+
+  await takeScreenshot('filter-method-with-case-sensitive-2.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: {
+    store: [
+      { ID: 1, text: 'true' },
+      { ID: 2, text: 'True' },
+    ],
+    langParams: {
+      locale: 'en-US',
+      collatorOptions: {
+        sensitivity: 'case',
+      },
+    },
+  },
+  keyExpr: 'ID',
+  showBorders: true,
+}));
+
+test('Data should be filtered if True is selected via the option method when case sensitive is enabled', async (t) => {
+  // arrange
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+
+  // assert
+  await t.expect(dataGrid.isReady()).ok();
+
+  await takeScreenshot('filtering-via-option-method-with-case-sensitive-1.png', dataGrid.element);
+
+  // act
+  await dataGrid.option('columns', ['ID', { dataField: 'text', filterValue: 'True' }]);
+
+  // assert
+  await t.expect(dataGrid.isReady()).ok();
+
+  await takeScreenshot('filtering-via-option-method-with-case-sensitive-2.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: {
+    store: [
+      { ID: 1, text: 'true' },
+      { ID: 2, text: 'True' },
+    ],
+    langParams: {
+      locale: 'en-US',
+      collatorOptions: {
+        sensitivity: 'case',
+      },
+    },
+  },
+  keyExpr: 'ID',
+  showBorders: true,
+  columns: ['ID', {
+    dataField: 'text',
+    filterValue: 'true',
+  }],
+}));

e2e/testcafe-devextreme/tests/dataGrid/etalons/filter-method-with-case-sensitive-2.png

@@ -234,3 +234,52 @@ test('DataGrid - Column Header filter does not properly work if the column capti
     'FirstName',
   ],
 }));
+
+test('Data should be filtered if True is selected in the header filter when case sensitive is enabled (T1273020)', async (t) => {
+  // arrange
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+  const headerCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(1);
+  const filterIconElement = headerCell.getFilterIcon();
+  const headerFilter = new HeaderFilter();
+  const buttons = headerFilter.getButtons();
+  const list = headerFilter.getList();
+
+  // act
+  await t
+    .click(filterIconElement)
+    .click(list.getItem(0).element) // Select first item with value 'true'
+    .click(buttons.nth(0)); // Click OK
+
+  await takeScreenshot('T1273020-header-filter-with-case-sensitive-1.png', dataGrid.element);
+
+  // act
+  await t
+    .click(filterIconElement)
+    .click(list.getItem(0).element) // Deselect first item with value 'true'
+    .click(list.getItem(1).element) // Select second item with value 'True'
+    .click(buttons.nth(0)); // Click OK
+
+  await takeScreenshot('T1273020-header-filter-with-case-sensitive-2.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: {
+    store: [
+      { ID: 1, text: 'true' },
+      { ID: 2, text: 'True' },
+    ],
+    langParams: {
+      locale: 'en-US',
+      collatorOptions: {
+        sensitivity: 'case',
+      },
+    },
+  },
+  keyExpr: 'ID',
+  showBorders: true,
+  headerFilter: { visible: true },
+}));

e2e/testcafe-devextreme/tests/dataGrid/etalons/filtering-via-option-method-with-case-sensitive-1.png

@@ -1238,6 +1238,8 @@ export class ColumnsController extends modules.Controller {
   }
 
   private _updateChanges(dataSource, parameters) {
+    const langParams = dataSource?.loadOptions?.()?.langParams;
+
     if (dataSource) {
       this.updateColumnDataTypes(dataSource);
       this._dataSourceApplied = true;
@@ -1251,7 +1253,7 @@ export class ColumnsController extends modules.Controller {
     }
 
     if (this._dataController
-      && !gridCoreUtils.equalFilterParameters(parameters.filtering, this._dataController.getCombinedFilter())) {
+      && !gridCoreUtils.equalFilterParameters(parameters.filtering, this._dataController.getCombinedFilter(), langParams)) {
       updateColumnChanges(this, 'filtering');
     }
     updateColumnChanges(this, 'columns');

e2e/testcafe-devextreme/tests/dataGrid/etalons/filtering-via-option-method-with-case-sensitive-2.png

@@ -1310,15 +1310,16 @@ export class DataController extends DataHelperMixin(modules.Controller) {
 
   private filter(filterExpr) {
     const dataSource = this._dataSource;
-    const filter = dataSource && dataSource.filter();
+    const filter = dataSource?.filter();
+    const langParams = dataSource?.loadOptions?.()?.langParams;
 
     if (arguments.length === 0) {
       return filter;
     }
 
     filterExpr = arguments.length > 1 ? Array.prototype.slice.call(arguments, 0) : filterExpr;
 
-    if (gridCoreUtils.equalFilterParameters(filter, filterExpr)) {
+    if (gridCoreUtils.equalFilterParameters(filter, filterExpr, langParams)) {
       return;
     }
     if (dataSource) {