DataGrid: Fix detail grid reloading data when collapsed master row reenters viewport with virtual row rendering (T1326188)

Author: Alyar

e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/functional.ts

@@ -0,0 +1,113 @@
+import { ClientFunction } from 'testcafe';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+
+const getDetailGridLoadCount = ClientFunction(() => (window as any).detailGridLoadCount as number);
+
+fixture.disablePageReloads`Master detail.Functional`
+  .page(url(__dirname, '../../../container.html'));
+
+test('Detail grid should not reload data when the collapsed master row reenters the viewport with standard scrolling and virtual row rendering (T1326188)', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid('#container');
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  // act - expand the master row
+  await t.click(dataGrid.getDataRow(0).getCommandCell(0).element);
+
+  let detailGrid = dataGrid.getMasterRow(0).getDataGrid();
+
+  // assert
+  await t
+    .expect(dataGrid.getDataRow(0).isExpanded)
+    .ok()
+    .expect(detailGrid.element.exists)
+    .ok()
+    .expect(getDetailGridLoadCount())
+    .eql(1);
+
+  // act - collapse the master row
+  await t.click(dataGrid.getDataRow(0).getCommandCell(0).element);
+
+  // assert
+  await t
+    .expect(dataGrid.getDataRow(0).isExpanded)
+    .notOk()
+    .expect(detailGrid.element.visible)
+    .notOk()
+    .expect(getDetailGridLoadCount())
+    .eql(1);
+
+  // act
+  await dataGrid.scrollTo(t, { y: 5000 });
+
+  // assert
+  await t
+    .expect(dataGrid.getScrollTop())
+    .gt(0, 'grid should have scrolled down');
+
+  // act
+  await dataGrid.scrollTo(t, { y: 0 });
+
+  detailGrid = dataGrid.getMasterRow(0).getDataGrid();
+
+  // assert
+  await t
+    .expect(dataGrid.getScrollTop())
+    .eql(0, 'grid should have scrolled back to top')
+    .expect(detailGrid.element.exists)
+    .notOk()
+    .expect(getDetailGridLoadCount())
+    .eql(1, 'Detail grid data should not be reloaded after scrolling back to the collapsed master row');
+}).before(async () => {
+  await ClientFunction(() => {
+    (window as any).detailGridLoadCount = 0;
+  })();
+
+  return createWidget('dxDataGrid', {
+    dataSource: [...new Array(200)].map((_, index) => ({
+      id: index,
+      text: `item ${index}`,
+    })),
+    keyExpr: 'id',
+    height: 400,
+    scrolling: {
+      mode: 'standard',
+      rowRenderingMode: 'virtual',
+      // @ts-expect-error private option
+      updateTimeout: 0,
+      useNative: false,
+    },
+    paging: {
+      enabled: false,
+    },
+    columns: ['id', 'text'],
+    masterDetail: {
+      enabled: true,
+      template(container) {
+        ($('<div>') as any)
+          .dxDataGrid({
+            keyExpr: 'id',
+            height: 180,
+            columns: ['id', 'text'],
+            dataSource: {
+              load() {
+                ((window as any).detailGridLoadCount as number) += 1;
+
+                return [
+                  { id: 1, text: 'detail 1' },
+                  { id: 2, text: 'detail 2' },
+                ];
+              },
+              key: 'id',
+            } as any,
+          })
+          .appendTo(container);
+      },
+    },
+  });
+}).after(async () => ClientFunction(() => {
+  delete (window as any).detailGridLoadCount;
+})());

…me/tests/dataGrid/common/masterDetail.ts …s/dataGrid/common/masterDetail/visual.tse2e/testcafe-devextreme/tests/dataGrid/common/masterDetail.ts renamed to e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/visual.ts e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail.ts renamed to e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/visual.ts

@@ -1,12 +1,12 @@
 import { ClientFunction } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import url from '../../../helpers/getPageUrl';
-import { createWidget } from '../../../helpers/createWidget';
-import { testScreenshot } from '../../../helpers/themeUtils';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+import { testScreenshot } from '../../../../helpers/themeUtils';
 
-fixture.disablePageReloads`Master detail`
-  .page(url(__dirname, '../../container.html'));
+fixture.disablePageReloads`Master detail.Visual`
+  .page(url(__dirname, '../../../container.html'));
 
 // visual: material.blue.light
 // visual: generic.light

packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts

@@ -1791,6 +1791,10 @@ export class DataController extends DataHelperMixin(modules.Controller) {
   public isViewportChanging(): boolean {
     return false;
   }
+
+  public resetCachedProcessedItems(): void {
+    this._cachedProcessedItems = null;
+  }
 }
 export const dataControllerModule: Module = {
   defaultOptions() {

packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.ts

@@ -118,6 +118,7 @@ export const dataMasterDetailExtenderMixin = (Base: ModuleType<DataController>)
         changeType: 'update',
         rowIndices: that._getRowIndicesForExpand(key),
       });
+      that.resetCachedProcessedItems();
 
       // @ts-expect-error
       result = new Deferred().resolve();