DataGrid: Fix sorting when it and filtering are changed at the same t…

…ime (T1237863) (#28545) Co-authored-by: Alyar <>
DevExpress · Dec 13, 2024 · d386c13 · d386c13
1 parent 7774284
commit d386c13
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 4 deletions.
diff --git a/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts
@@ -1259,7 +1259,6 @@ export class ColumnsController extends modules.Controller {
 
   public updateSortingGrouping(dataSource, fromDataSource?) {
     const that = this;
-    let sortParameters;
     let isColumnsChanged;
     const updateSortGroupParameterIndexes = function (columns, sortParameters, indexParameterName) {
       each(columns, (index, column) => {
@@ -1296,10 +1295,14 @@ export class ColumnsController extends modules.Controller {
       });
     };
     if (dataSource) {
-      sortParameters = gridCoreUtils.normalizeSortingInfo(dataSource.sort());
+      const sortParameters = gridCoreUtils.normalizeSortingInfo(dataSource.sort());
       const groupParameters = gridCoreUtils.normalizeSortingInfo(dataSource.group());
       const columnsGroupParameters = that.getGroupDataSourceParameters();
       const columnsSortParameters = that.getSortDataSourceParameters();
+      const changeTypes = this._columnChanges?.changeTypes;
+      const sortingChanged = !gridCoreUtils.equalSortParameters(sortParameters, columnsSortParameters);
+      const needToApplySortingFromDataSource = fromDataSource && !changeTypes?.sorting;
+      const needToApplyGroupingFromDataSource = fromDataSource && !changeTypes?.grouping;
       const groupingChanged = !gridCoreUtils.equalSortParameters(groupParameters, columnsGroupParameters, true);
       const groupExpandingChanged = !groupingChanged && !gridCoreUtils.equalSortParameters(groupParameters, columnsGroupParameters);
 
@@ -1315,7 +1318,7 @@ export class ColumnsController extends modules.Controller {
         assignColumns(that, createColumnsFromOptions(that, that._columns));
       }
 
-      if ((fromDataSource || (!columnsGroupParameters && !that._hasUserState)) && (groupingChanged || groupExpandingChanged)) {
+      if ((needToApplyGroupingFromDataSource || (!columnsGroupParameters && !that._hasUserState)) && (groupingChanged || groupExpandingChanged)) {
         /// #DEBUG
         that.__groupingUpdated = true;
         /// #ENDDEBUG
@@ -1326,7 +1329,8 @@ export class ColumnsController extends modules.Controller {
           isColumnsChanged = true;
         }
       }
-      if ((fromDataSource || (!columnsSortParameters && !that._hasUserState)) && !gridCoreUtils.equalSortParameters(sortParameters, columnsSortParameters)) {
+
+      if ((needToApplySortingFromDataSource || (!columnsSortParameters && !that._hasUserState)) && sortingChanged) {
         /// #DEBUG
         that.__sortingUpdated = true;
         /// #ENDDEBUG

diff --git a/...fe/tests/dataGrid/grouping/etalons/T1237863_datagrid-grouping_and_filtering.png b/...fe/tests/dataGrid/grouping/etalons/T1237863_datagrid-grouping_and_filtering.png
diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/grouping/grouping.ts b/packages/devextreme/testing/testcafe/tests/dataGrid/grouping/grouping.ts
@@ -378,3 +378,42 @@ test('DataGrid loses grouping after the expandAll method if a grouped column has
     },
   ],
 }));
+
+test('Grouping and filtering should be applied correctly when they change at runtime (T1237863)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await dataGrid.option({
+    'columns[2].groupIndex': 0,
+    filterValue: ['room', '=', '1'],
+  });
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await takeScreenshot('T1237863_datagrid-grouping_and_filtering.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(() => createWidget('dxDataGrid', {
+  dataSource: [
+    {
+      ID: 1,
+      FirstName: 'Bob',
+      room: 1,
+    },
+    {
+      ID: 2,
+      FirstName: 'Alex',
+      room: 2,
+    },
+    {
+      ID: 3,
+      FirstName: 'John',
+      room: 1,
+    },
+  ],
+  keyExpr: 'ID',
+}));
diff --git a/...cafe/tests/dataGrid/sorting/etalons/T1237863_datagrid-sorting_and_filtering.png b/...cafe/tests/dataGrid/sorting/etalons/T1237863_datagrid-sorting_and_filtering.png
diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/sorting/sorting.ts b/packages/devextreme/testing/testcafe/tests/dataGrid/sorting/sorting.ts
@@ -87,3 +87,46 @@ test('Multiple sorting alphabetical icons should be correct in Fluent Theme (T12
     });
   },
 ).after(async () => { await changeTheme(Themes.genericLight); });
+
+test('Sorting and filtering should be applied correctly when they change at runtime (T1237863)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await dataGrid.option({
+    'columns[1].sortIndex': 0,
+    'columns[1].sortOrder': 'desc',
+    filterValue: ['room', '=', '1'],
+  });
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await takeScreenshot('T1237863_datagrid-sorting_and_filtering.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(() => createWidget('dxDataGrid', {
+  dataSource: [
+    {
+      ID: 1,
+      FirstName: 'Bob',
+      room: 1,
+    },
+    {
+      ID: 2,
+      FirstName: 'Alex',
+      room: 2,
+    },
+    {
+      ID: 3,
+      FirstName: 'John',
+      room: 1,
+    },
+  ],
+  keyExpr: 'ID',
+  sorting: {
+    mode: 'multiple',
+  },
+}));