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 index 8ad5de9dab8d..1c6c0a2bfe46 100644 --- 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/packages/devextreme/testing/testcafe/tests/dataGrid/grouping/grouping.ts b/packages/devextreme/testing/testcafe/tests/dataGrid/grouping/grouping.ts index 212975bcfe5b..11227b617c28 100644 --- 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/packages/devextreme/testing/testcafe/tests/dataGrid/sorting/sorting.ts b/packages/devextreme/testing/testcafe/tests/dataGrid/sorting/sorting.ts index 6fde3381a4c1..d4b1fd2c82d6 100644 --- 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', + }, +}));