T1260472: fix grid async render to avoid blinking (DevExpress#28975)

Co-authored-by: Vladimir Bushmanov <[email protected]>

Author: Ambrozy

e2e/testcafe-devextreme/tests/dataGrid/etalons/T1260472-async-render-after-horizontal-scrolling.png

@@ -348,3 +348,86 @@ test('Group row should have right colspan with summary, virtual columns and fixe
     },
   });
 });
+
+// T1260472
+test('Header, fixed columns and virtual scroll bar should have stable position during async render and virtual horizontal scrolling', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await t.expect(dataGrid.getDataRow(0).element.exists).ok(); // wait for initial render
+  await ClientFunction(() => { (window as any).deferred = $.Deferred(); })();
+  await dataGrid.scrollTo(t, { x: 2000 });
+  await takeScreenshot('T1260472-async-render-during-horizontal-scrolling.png', dataGrid.element);
+  await ClientFunction(() => {
+    (window as any).deferred.resolve();
+    (window as any).deferred = undefined;
+  })();
+  await takeScreenshot('T1260472-async-render-after-horizontal-scrolling.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  const defaultColumnConfig = {
+    headerCellTemplate: 'headerCellTemplate',
+    cellTemplate: 'cellTemplate',
+  };
+
+  return createWidget('dxDataGrid', {
+    dataSource: generateData(3, 50),
+    keyExpr: 'field1',
+    showBorders: true,
+    width: 500,
+    height: 173,
+    columnWidth: 100,
+    scrolling: {
+      rowRenderingMode: 'virtual',
+      columnRenderingMode: 'virtual',
+      mode: 'virtual',
+      useNative: false,
+    },
+    columns: Array.from({ length: 20 }).map((_, i) => ({
+      ...defaultColumnConfig,
+      caption: `Product${i + 1}`,
+      fixed: i === 0,
+      columns: [
+        { ...defaultColumnConfig, dataField: `field${(2 * i) + 1}`, fixed: i === 0 },
+        { ...defaultColumnConfig, dataField: `field${(2 * i) + 2}`, fixed: i === 0 },
+      ],
+    })),
+    // @ts-expect-error private option
+    templatesRenderAsynchronously: true,
+    integrationOptions: {
+      templates: {
+        headerCellTemplate: {
+          render({ model, container, onRendered }) {
+            const title = model.column.caption == null ? null : model.column.caption;
+            const content = $(`<span title='${title}'>
+          ${title}
+        </span>`);
+            container.append(content);
+            if ((window as any).deferred) {
+              (window as any).deferred.done(onRendered);
+            } else {
+              onRendered();
+            }
+          },
+        },
+        cellTemplate: {
+          render({ model, container, onRendered }) {
+            const title = model.value == null ? null : model.value;
+            const content = $(`<span title='${title}'>
+          ${title}
+        </span>`);
+            container.append(content);
+            if ((window as any).deferred) {
+              (window as any).deferred.done(onRendered);
+            } else {
+              onRendered();
+            }
+          },
+        },
+      },
+    },
+  });
+});

e2e/testcafe-devextreme/tests/dataGrid/etalons/T1260472-async-render-during-horizontal-scrolling.png

@@ -226,6 +226,8 @@ export class FooterView extends ColumnsView {
       this._updateContent(this._renderTable({ change }), change);
       needUpdateScrollLeft && this._updateScrollLeftPosition();
     }
+
+    return super._renderCore(change);
   }
 
   protected _updateContent($newTable, change) {

e2e/testcafe-devextreme/tests/dataGrid/virtualColumns.ts

@@ -299,8 +299,7 @@ export class ColumnHeadersView extends ColumnsView {
 
     $container
       .addClass(that.addWidgetPrefix(HEADERS_CLASS))
-      .toggleClass(that.addWidgetPrefix(NOWRAP_CLASS), !that.option('wordWrapEnabled'))
-      .empty();
+      .toggleClass(that.addWidgetPrefix(NOWRAP_CLASS), !that.option('wordWrapEnabled'));
 
     that.setAria('role', 'presentation', $container);
 

packages/devextreme/js/__internal/grids/data_grid/summary/m_summary.ts

@@ -718,6 +718,9 @@ export class ColumnsView extends ColumnStateMixin(modules.View) {
     if (!$root || $root.parent().length) {
       this.renderDelayedTemplates(e);
     }
+
+    // @ts-expect-error
+    return new Deferred().resolve();
   }
 
   /**
@@ -1108,6 +1111,9 @@ export class ColumnsView extends ColumnStateMixin(modules.View) {
     return result.promise();
   }
 
+  /**
+   * @extended: sticky_columns, rows_view
+   */
   protected _updateContent($newTableElement, change, isFixedTableRendering?) {
     return this.waitAsyncTemplates().done(() => {
       this._removeContent(isFixedTableRendering);