DataGrid: Fix displaying of row alternation when grouping and virtual…

… scrolling are enabled (T1194796) (#25929) Co-authored-by: Alyar <>
DevExpress · Nov 6, 2023 · ed8e1eb · ed8e1eb
1 parent 6eb9eda
commit ed8e1eb
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 3 deletions.
diff --git 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
@@ -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/...taGrid/etalons/T1194796-row-alternation-with-grouping-and-virtual-scrolling.png b/...taGrid/etalons/T1194796-row-alternation-with-grouping-and-virtual-scrolling.png
diff --git 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 },
+})));