DataGrid: Fix gray boxes rendering when cellTemplates are used and th…

…e selectedRowKeys array contains an invalid key (T1188828) (#25603) Co-authored-by: Alyar <>
DevExpress · Sep 19, 2023 · 1bad087 · 1bad087
1 parent 4bad20a
commit 1bad087
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
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
@@ -1419,13 +1419,15 @@ export const virtualScrollingModule = {
           loadViewport(params) {
             const { checkLoadedParamsOnly, checkLoading, viewportIsNotFilled } = params ?? {};
             const virtualPaging = isVirtualPaging(this);
+
             if (virtualPaging || gridCoreUtils.isVirtualRowRendering(this)) {
               this._updateLoadViewportParams();
 
               const loadingItemsStarted = this._loadItems(checkLoading, !viewportIsNotFilled);
-
+              const isCustomLoading = this._dataSource?.isCustomLoading();
+              const isLoading = checkLoading && !isCustomLoading && this._isLoading;
               const needToUpdateItems = !(loadingItemsStarted
-                                || this._isLoading && checkLoading
+                                || isLoading
                                 || checkLoadedParamsOnly);
 
               if (needToUpdateItems) {

diff --git a/...dataGrid/stateStoring/etalons/T1188828-state-storing-with-selected-row-keys.png b/...dataGrid/stateStoring/etalons/T1188828-state-storing-with-selected-row-keys.png
diff --git a/testing/testcafe/tests/dataGrid/stateStoring/stateStoring.ts b/testing/testcafe/tests/dataGrid/stateStoring/stateStoring.ts
@@ -1,7 +1,10 @@
 import { ClientFunction } from 'testcafe';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import url from '../../../helpers/getPageUrl';
 import createWidget from '../../../helpers/createWidget';
 import DataGrid from '../../../model/dataGrid';
+import { getData } from '../helpers/generateDataSourceData';
+import { makeRowsViewTemplatesAsync } from '../helpers/asyncTemplates';
 
 fixture.disablePageReloads`State Storing`
   .page(url(__dirname, '../../container.html'));
@@ -34,3 +37,46 @@ test('The Grid should load if JSON in localStorage is invalid and stateStoring e
     },
   });
 });
+
+// T1188828
+test('The rows should render correctly when cellTemplates are used and the selectedRowKeys array contains an invalid key', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  // assert
+  await t
+    .expect(dataGrid.isReady())
+    .ok()
+    .expect(await takeScreenshot('T1188828-state-storing-with-selected-row-keys.png', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    height: 800,
+    renderAsync: false,
+    templatesRenderAsynchronously: true,
+    dataSource: getData(1000, 1),
+    columns: [
+      {
+        dataField: 'field_0',
+        cellTemplate: (_, { value }) => ($('<div/>') as any).text(value),
+      },
+    ],
+    stateStoring: {
+      enabled: true,
+      type: 'custom',
+      customLoad: () => ({
+        selectedRowKeys: ['key-invalid'],
+      }),
+    },
+    paging: { pageSize: 50 },
+    scrolling: {
+      rowRenderingMode: 'virtual',
+    },
+  });
+
+  // simulating async rendering in React
+  await makeRowsViewTemplatesAsync(GRID_CONTAINER);
+});