From ed8e1eb2b09dce542a797d7f0193c3868c4aa22d Mon Sep 17 00:00:00 2001 From: Alyar Date: Tue, 7 Nov 2023 00:56:22 +0400 Subject: [PATCH] DataGrid: Fix displaying of row alternation when grouping and virtual scrolling are enabled (T1194796) (#25929) Co-authored-by: Alyar <> --- .../grouping/m_grouping_collapsed.ts | 2 + .../virtual_scrolling/m_virtual_scrolling.ts | 12 ++++-- ...on-with-grouping-and-virtual-scrolling.png | Bin 0 -> 13281 bytes testing/testcafe/tests/dataGrid/scrolling.ts | 40 ++++++++++++++++++ 4 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 testing/testcafe/tests/dataGrid/etalons/T1194796-row-alternation-with-grouping-and-virtual-scrolling.png diff --git a/js/__internal/grids/data_grid/grouping/m_grouping_collapsed.ts b/js/__internal/grids/data_grid/grouping/m_grouping_collapsed.ts index 58ef4eb37e86..8db948afe0f5 100644 --- a/js/__internal/grids/data_grid/grouping/m_grouping_collapsed.ts +++ b/js/__internal/grids/data_grid/grouping/m_grouping_collapsed.ts @@ -547,6 +547,8 @@ export const GroupingHelper = GroupingHelperCore.inherit((function () { if (!options.remoteOperations.paging) { that._updatePagingOptions(options); + options.lastLoadOptions.skips = options.skips; + options.lastLoadOptions.takes = options.takes; } callBase(options); diff --git a/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts b/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts index 4f13231027a6..c8164ff26071 100644 --- a/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts +++ b/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts @@ -1212,7 +1212,7 @@ export const virtualScrollingModule = { return delta < 0 ? 0 : delta; }, - getRowIndexOffset(byLoadedRows) { + getRowIndexOffset(byLoadedRows, needGroupOffset) { let offset = 0; const dataSource = this.dataSource(); const rowsScrollController = this._rowsScrollController; @@ -1232,7 +1232,13 @@ export const virtualScrollingModule = { offset = rowsScrollController.beginPageIndex() * rowsScrollController.pageSize(); } } else if (virtualPaging && newMode && dataSource) { - offset = dataSource.lastLoadOptions().skip ?? 0; + const lastLoadOptions = dataSource.lastLoadOptions(); + + if (needGroupOffset && lastLoadOptions.skips?.length) { + offset = lastLoadOptions.skips.reduce((res: number, skip: number) => res + skip, 0); + } else { + offset = lastLoadOptions.skip ?? 0; + } } else if (isVirtualMode(this) && dataSource) { offset = dataSource.beginPageIndex() * dataSource.pageSize(); } @@ -1241,7 +1247,7 @@ export const virtualScrollingModule = { }, getDataIndex() { if (this.option(LEGACY_SCROLLING_MODE) === false) { - return this.getRowIndexOffset(true); + return this.getRowIndexOffset(true, true); } return this.callBase.apply(this, arguments); diff --git a/testing/testcafe/tests/dataGrid/etalons/T1194796-row-alternation-with-grouping-and-virtual-scrolling.png b/testing/testcafe/tests/dataGrid/etalons/T1194796-row-alternation-with-grouping-and-virtual-scrolling.png new file mode 100644 index 0000000000000000000000000000000000000000..e189a9272c4b88bb410806971d35c84b48586bd3 GIT binary patch literal 13281 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 literal 0 HcmV?d00001 diff --git a/testing/testcafe/tests/dataGrid/scrolling.ts b/testing/testcafe/tests/dataGrid/scrolling.ts index 722ad2cb1e16..be6edf75b43e 100644 --- a/testing/testcafe/tests/dataGrid/scrolling.ts +++ b/testing/testcafe/tests/dataGrid/scrolling.ts @@ -1625,3 +1625,43 @@ test('Warning should be thrown if scrolling is virtual and height is not specifi mode: 'virtual', }, })); + +// T1194796 +test('The row alternation should display correctly when grouping and virtual scrolling are enabled', async (t) => { + const dataGrid = new DataGrid('#container'); + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + + await t + .expect(dataGrid.isReady()) + .ok() + .expect(dataGrid.hasScrollable()) + .ok(); + + // act + await dataGrid.scrollTo(t, { y: 100 }); + await dataGrid.scrollTo(t, { y: 200 }); + await dataGrid.scrollTo(t, { y: 300 }); + await dataGrid.scrollTo(t, { y: 400 }); + + // assert + await t + .expect(dataGrid.isReady()) + .ok() + .expect(await takeScreenshot('T1194796-row-alternation-with-grouping-and-virtual-scrolling', '#container')) + .ok() + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => createWidget('dxDataGrid', () => ({ + dataSource: new Array(20).fill(null).map((_, index) => ({ + groupField: index < 2 ? index : 2, + field: `test${index}`, + })), + height: 400, + paging: { + pageSize: 5, + }, + columns: [{ dataField: 'groupField', groupIndex: 0 }, 'field'], + rowAlternationEnabled: true, + grouping: { autoExpandAll: true }, + scrolling: { mode: 'virtual', useNative: false }, +})));