Skip to content

Commit af8cfbe

Browse files
author
Alyar
committed
DataGrid: Fix the navigateToRow method when navigating down to the bottom row with virtual scrolling enabled
1 parent a952194 commit af8cfbe

9 files changed

Lines changed: 91 additions & 2 deletions
Loading
29 Bytes
Loading
Loading
-32 Bytes
Loading
Loading
3 Bytes
Loading

e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2094,3 +2094,82 @@ test('Warning should not be thrown if scrolling is virtual and height is specifi
20942094
});
20952095
});
20962096
});
2097+
2098+
test('navigateToRow should scroll to the correct row with virtual scrolling (T1220800)', async (t) => {
2099+
const dataGrid = new DataGrid('#container');
2100+
const targetKey = 901;
2101+
2102+
await t.expect(dataGrid.isReady()).ok();
2103+
2104+
// act
2105+
await dataGrid.apiNavigateToRow(targetKey);
2106+
2107+
// assert
2108+
await t
2109+
.expect(dataGrid.isReady())
2110+
.ok()
2111+
.expect(dataGrid.getDataCells(0).nth(0).textContent)
2112+
.eql(String(targetKey));
2113+
2114+
const visibleRows = await dataGrid.apiGetVisibleRows();
2115+
2116+
await t.expect(visibleRows[0].key).eql(targetKey, `Row with key ${targetKey} should be the first visible row after navigation`);
2117+
}).before(async (t) => {
2118+
const initStore = ClientFunction(() => {
2119+
const getItems = (): Record<string, unknown>[] => {
2120+
const items: Record<string, unknown>[] = [];
2121+
for (let i = 0; i < 1000000; i += 1) {
2122+
items.push({
2123+
ID: i + 1,
2124+
Name: `Name ${i + 1}`,
2125+
Description: `Text text text text text text text text text text ${i + 1}`,
2126+
});
2127+
}
2128+
return items;
2129+
};
2130+
2131+
(window as any).myStore = new (window as any).DevExpress.data.ArrayStore({
2132+
key: 'ID',
2133+
data: getItems(),
2134+
});
2135+
});
2136+
2137+
await initStore.with({ boundTestRun: t })();
2138+
2139+
return createWidget('dxDataGrid', () => ({
2140+
dataSource: new (window as any).DevExpress.data.CustomStore({
2141+
key: 'ID',
2142+
loadMode: 'raw',
2143+
load(loadOptions) {
2144+
return new Promise((resolve) => {
2145+
(window as any).myStore.load(loadOptions).done((data) => {
2146+
resolve(data);
2147+
});
2148+
});
2149+
},
2150+
totalCount() {
2151+
return (window as any).myStore.totalCount();
2152+
},
2153+
}),
2154+
width: 900,
2155+
height: 250,
2156+
wordWrapEnabled: true,
2157+
showBorders: true,
2158+
scrolling: {
2159+
mode: 'virtual',
2160+
rowRenderingMode: 'virtual',
2161+
useNative: false,
2162+
},
2163+
paging: {
2164+
pageSize: 20,
2165+
},
2166+
columns: [
2167+
{
2168+
dataField: 'ID',
2169+
width: 90,
2170+
},
2171+
'Name',
2172+
'Description',
2173+
],
2174+
}));
2175+
});

packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling_core.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@ class VirtualScrollController {
321321
}
322322
});
323323

324-
return Math.floor(offset + itemCount * this._viewportItemSize * this._sizeRatio);
324+
return offset + itemCount * this._viewportItemSize * this._sizeRatio;
325325
}
326326

327327
private getContentOffset(type) {

packages/testcafe-models/dataGrid/index.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,10 +181,18 @@ export default class DataGrid extends GridCore {
181181
return this.getRowsView().find(`.${CLASS.row}`);
182182
}
183183

184+
getDataRows(): Selector {
185+
return this.getRows().filter(`.${CLASS.dataRow}`);
186+
}
187+
184188
getCells(): Selector {
185189
return this.getRowsView().find('td');
186190
}
187191

192+
getDataCells(rowIndex: number): Selector {
193+
return this.getDataRows().nth(rowIndex).find('td');
194+
}
195+
188196
getDataRow(index: number): DataRow {
189197
return new DataRow(this.element.find(`.${CLASS.dataRow}[aria-rowindex='${index + 1}']`), this.getName());
190198
}
@@ -926,8 +934,10 @@ export default class DataGrid extends GridCore {
926934
const isElementInRowsView = (element) => {
927935
const rowsViewRect = rowsViewElement[0].getBoundingClientRect();
928936
const elementRect = element.getBoundingClientRect();
937+
const tolerance = 1;
929938

930-
return elementRect.top >= rowsViewRect.top && elementRect.bottom <= rowsViewRect.bottom;
939+
return elementRect.top >= rowsViewRect.top - tolerance
940+
&& elementRect.bottom <= rowsViewRect.bottom + tolerance;
931941
};
932942
const rowElement = rowsViewElement.find('.dx-row-focused');
933943

0 commit comments

Comments
 (0)