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

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

Author: Ambrozy

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

@@ -358,3 +358,85 @@ 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,
+    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

@@ -127,8 +127,7 @@ const baseStickyColumns = <T extends ModuleType<ColumnsView>>(Base: T) => class
   }
 
   protected _renderCore(options?) {
-    super._renderCore(options);
-
+    const deferred = super._renderCore(options);
     const $element = this.element();
     const hasStickyColumns = this.hasStickyColumns();
 
@@ -137,6 +136,14 @@ const baseStickyColumns = <T extends ModuleType<ColumnsView>>(Base: T) => class
       hasStickyColumns,
       this.addWidgetPrefix.bind(this),
     );
+
+    if (hasStickyColumns) {
+      return deferred.done(() => {
+        this.setStickyOffsets();
+      });
+    }
+
+    return deferred;
   }
 
   protected _createCell(options) {

packages/devextreme/js/__internal/grids/grid_core/column_headers/m_column_headers.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();
   }
 
   /**
@@ -1119,6 +1122,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);

packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts

@@ -58,11 +58,15 @@ const rowsView = (Base: ModuleType<RowsView>) => class VirtualColumnsRowsViewExt
       const $contentElement = this._findContentElement();
       const fixedColumns = this._columnsController?.getFixedColumns();
       const useNativeScrolling = this._scrollable?.option('useNative');
+      const legacyMode = this.option('columnFixing.legacyMode');
 
       if (fixedColumns?.length) {
-        $contentElement.css({
-          minHeight: useNativeScrolling ? getHeight($contentElement) : gridCoreUtils.getContentHeightLimit(browser),
-        });
+        // TODO: remove the condition when legacyMode is removed
+        if (legacyMode && !useNativeScrolling) {
+          $contentElement.css({ minHeight: gridCoreUtils.getContentHeightLimit(browser) });
+        } else {
+          $contentElement.css({ minHeight: getHeight($contentElement) });
+        }
 
         const resizeCompletedHandler = () => {
           this.resizeCompleted.remove(resizeCompletedHandler);