DataGrid: Fix the navigateToRow method when navigating down to the bottom row with virtual scrolling enabled (T1220800) (#33692)

Co-authored-by: Alyar <>

Author: Alyar666

e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/rows_do_not_overlap_data_fields_if_virtual_scrolling_enabled_T1210807 (fluent.blue.light).png

@@ -2115,3 +2115,82 @@ test('Horizontal scrollbar should not appear when columnHidingEnabled is true an
     useNative: true,
   },
 }));
+
+test('navigateToRow should scroll to the correct row with virtual scrolling (T1220800)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const targetKey = 901;
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  // act
+  await dataGrid.apiNavigateToRow(targetKey);
+
+  // assert
+  await t
+    .expect(dataGrid.isReady())
+    .ok()
+    .expect(dataGrid.getDataCells(0).nth(0).textContent)
+    .eql(String(targetKey));
+
+  const visibleRows = await dataGrid.apiGetVisibleRows();
+
+  await t.expect(visibleRows[0].key).eql(targetKey, `Row with key ${targetKey} should be the first visible row after navigation`);
+}).before(async (t) => {
+  const initStore = ClientFunction(() => {
+    const getItems = (): Record<string, unknown>[] => {
+      const items: Record<string, unknown>[] = [];
+      for (let i = 0; i < 1000000; i += 1) {
+        items.push({
+          ID: i + 1,
+          Name: `Name ${i + 1}`,
+          Description: `Text text text text text text text text text text ${i + 1}`,
+        });
+      }
+      return items;
+    };
+
+    (window as any).myStore = new (window as any).DevExpress.data.ArrayStore({
+      key: 'ID',
+      data: getItems(),
+    });
+  });
+
+  await initStore.with({ boundTestRun: t })();
+
+  return createWidget('dxDataGrid', () => ({
+    dataSource: new (window as any).DevExpress.data.CustomStore({
+      key: 'ID',
+      loadMode: 'raw',
+      load(loadOptions) {
+        return new Promise((resolve) => {
+          (window as any).myStore.load(loadOptions).done((data) => {
+            resolve(data);
+          });
+        });
+      },
+      totalCount() {
+        return (window as any).myStore.totalCount();
+      },
+    }),
+    width: 900,
+    height: 250,
+    wordWrapEnabled: true,
+    showBorders: true,
+    scrolling: {
+      mode: 'virtual',
+      rowRenderingMode: 'virtual',
+      useNative: false,
+    },
+    paging: {
+      pageSize: 20,
+    },
+    columns: [
+      {
+        dataField: 'ID',
+        width: 90,
+      },
+      'Name',
+      'Description',
+    ],
+  }));
+});

e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/rows_do_not_overlap_data_fields_if_virtual_scrolling_enabled_T1210807 (material.blue.light).png

@@ -321,7 +321,7 @@ class VirtualScrollController {
       }
     });
 
-    return Math.floor(offset + itemCount * this._viewportItemSize * this._sizeRatio);
+    return offset + itemCount * this._viewportItemSize * this._sizeRatio;
   }
 
   private getContentOffset(type) {

e2e/testcafe-devextreme/tests/common/treeList/etalons/T1189118-treelist-select-all-with-virtual-scrolling-2 (fluent.blue.light).png

@@ -190,10 +190,18 @@ export default class DataGrid extends GridCore {
     return this.getRowsView().find(`.${CLASS.row}`);
   }
 
+  getDataRows(): Selector {
+    return this.getRows().filter(`.${CLASS.dataRow}`);
+  }
+
   getCells(): Selector {
     return this.getRowsView().find('td');
   }
 
+  getDataCells(rowIndex: number): Selector {
+    return this.getDataRows().nth(rowIndex).find('td');
+  }
+
   getDataRow(index: number): DataRow {
     return new DataRow(this.element.find(`.${CLASS.dataRow}[aria-rowindex='${index + 1}']`), this.getName());
   }
@@ -962,8 +970,10 @@ export default class DataGrid extends GridCore {
       const isElementInRowsView = (element) => {
         const rowsViewRect = rowsViewElement[0].getBoundingClientRect();
         const elementRect = element.getBoundingClientRect();
+        const tolerance = 1;
 
-        return elementRect.top >= rowsViewRect.top && elementRect.bottom <= rowsViewRect.bottom;
+        return elementRect.top >= rowsViewRect.top - tolerance
+          && elementRect.bottom <= rowsViewRect.bottom + tolerance;
       };
       const rowElement = rowsViewElement.find('.dx-row-focused');