TreeList: Fix navigation to the required node when cellRender is specified (T1275775) (DevExpress#29558)

Author: Alyar666

e2e/testcafe-devextreme/tests/treeList/API.ts

@@ -0,0 +1,78 @@
+import TreeList from 'devextreme-testcafe-models/treeList';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+
+fixture`Public methods`
+  .page(url(__dirname, '../container.html'));
+
+const getItems = (): Record<string, unknown>[] => {
+  const items: Record<string, unknown>[] = [];
+
+  for (let i = 0; i < 100; i += 1) {
+    items.push({ key: `item_${i}`, parentKey: null });
+
+    for (let j = 0; j < 100; j += 1) {
+      items.push({ key: `item_${i}_${j}`, parentKey: `item_${i}` });
+    }
+  }
+
+  return items;
+};
+
+[true, false].forEach((renderAsync) => {
+  [true, false].forEach((useNativeScrolling) => {
+    test(`The renderAsync=${renderAsync} and scrolling.useNative=${useNativeScrolling}: The navigateToRow method should work correctly when there are asynchronous cell templates and virtual scrolling is enabled (T1275775)`, async (t) => {
+      // arrange
+      const treeList = new TreeList('#container');
+      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+      await t
+        .expect(treeList.getDataCell(0, 0).element.textContent)
+        .contains('item_');
+
+      // act
+      await treeList.apiNavigateToRow('item_80_50');
+
+      // assert
+      await t
+        .expect(treeList.getDataCell(131, 0).element.textContent)
+        .contains('item_');
+
+      await takeScreenshot(`T1275775-navigateToRow-with-async-cell-templates_(renderAsync=${renderAsync}_useNativeScrolling=${useNativeScrolling})`, treeList.element);
+
+      await t
+        .expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    }).before(async () => createWidget('dxTreeList', {
+      dataSource: getItems(),
+      height: 500,
+      width: 500,
+      dataStructure: 'plain',
+      parentIdExpr: 'parentKey',
+      keyExpr: 'key',
+      renderAsync,
+      scrolling: {
+        mode: 'virtual',
+        useNaive: useNativeScrolling,
+      },
+      templatesRenderAsynchronously: true,
+      columns: [{
+        dataField: 'key',
+        cellTemplate: 'testCellTemplate',
+      }],
+      integrationOptions: {
+        templates: {
+          testCellTemplate: {
+            render({ model, container, onRendered }) {
+              setTimeout(() => {
+                container.append($('<span/>').text(model.value));
+                onRendered();
+              }, 100);
+            },
+          },
+        },
+      },
+    }));
+  });
+});

e2e/testcafe-devextreme/tests/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=false_useNativeScrolling=false).png

@@ -1048,7 +1048,7 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewFixedColumnsExten
     super._handleScroll(e);
   }
 
-  private _updateContentPosition(isRender) {
+  protected _updateContentPosition(isRender) {
     // @ts-expect-error m_virtual_scrolling method
     super._updateContentPosition.apply(this, arguments);
     if (!isRender) {

e2e/testcafe-devextreme/tests/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=false_useNativeScrolling=true).png

@@ -213,6 +213,7 @@ export class FocusController extends core.ViewController {
     const isAutoNavigate = that.isAutoNavigateToFocusedRow();
     // @ts-expect-error
     const d = new Deferred();
+    const rowsView = this.getView('rowsView');
 
     if (key === undefined || !this.getDataController().dataSource()) {
       return d.reject().promise();
@@ -239,7 +240,9 @@ export class FocusController extends core.ViewController {
           }).fail(d.reject);
         } else {
           this.getDataController().pageIndex(pageIndex).done(() => {
-            that._navigateTo(key, d, needFocusRow);
+            rowsView.waitAsyncTemplates(true).done(() => {
+              that._navigateTo(key, d, needFocusRow);
+            });
           }).fail(d.reject);
         }
       }).fail(d.reject);

e2e/testcafe-devextreme/tests/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=true_useNativeScrolling=false).png

@@ -1091,7 +1091,7 @@ export class ColumnsView extends ColumnStateMixin(modules.View) {
     const result = new Deferred();
     const needWaitAsyncTemplates = forceWaiting || this.needWaitAsyncTemplates();
 
-    if (!needWaitAsyncTemplates) {
+    if (!needWaitAsyncTemplates || !isDefined(this._templateDeferreds)) {
       return result.resolve();
     }
 

e2e/testcafe-devextreme/tests/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=true_useNativeScrolling=true).png

@@ -1605,7 +1605,7 @@ export const rowsView = (Base: ModuleType<RowsView>) => class VirtualScrollingRo
     return correctedRowHeights;
   }
 
-  private _updateContentPosition(isRender?) {
+  protected _updateContentPosition(isRender?) {
     const rowHeight = this._rowHeight || 20;
 
     this._dataController

packages/devextreme/js/__internal/grids/grid_core/column_fixing/m_column_fixing.ts

@@ -3,9 +3,12 @@ import { extend } from '@js/core/utils/extend';
 import type { DataController } from '@ts/grids/grid_core/data_controller/m_data_controller';
 import type DataSourceAdapter from '@ts/grids/grid_core/data_source_adapter/m_data_source_adapter';
 import type { ModuleType } from '@ts/grids/grid_core/m_types';
+import gridCoreUtils from '@ts/grids/grid_core/m_utils';
+import type { RowsView } from '@ts/grids/grid_core/views/m_rows_view';
 import {
   data as virtualScrollingDataControllerExtender,
   dataSourceAdapterExtender as virtualScrollingDataSourceAdapterExtender,
+  rowsView as virtualScrollingRowsViewExtender,
   virtualScrollingModule,
 } from '@ts/grids/grid_core/virtual_scrolling/m_virtual_scrolling';
 
@@ -14,6 +17,22 @@ import gridCore from './m_core';
 
 const oldDefaultOptions = virtualScrollingModule.defaultOptions;
 
+virtualScrollingModule.extenders.views.rowsView = (Base: ModuleType<RowsView>) => class TreeListVirtualScrollingRowsViewExtender extends virtualScrollingRowsViewExtender(Base) {
+  protected _handleDataChanged(e) {
+    const { operationTypes } = e;
+
+    if (e?.isDataChanged && gridCoreUtils.isVirtualRowRendering(this) && operationTypes) {
+      const { fullReload, pageIndex } = operationTypes;
+
+      if (!fullReload && pageIndex) {
+        this._updateContentPosition();
+      }
+    }
+
+    super._handleDataChanged(e);
+  }
+};
+
 virtualScrollingModule.extenders.controllers.data = (Base: ModuleType<DataController>) => class TreeListVirtualScrollingDataControllerExtender extends virtualScrollingDataControllerExtender(Base) {
   protected _loadOnOptionChange() {
     const virtualScrollController = this._dataSource?._virtualScrollController;