Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 79 additions & 0 deletions e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Comment thread
Alyar666 marked this conversation as resolved.
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`);
Comment thread
Alyar666 marked this conversation as resolved.
}).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}`,
});
Comment thread
Alyar666 marked this conversation as resolved.
}
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',
],
}));
Comment thread
Alyar666 marked this conversation as resolved.
});
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,7 @@ class VirtualScrollController {
}
});

return Math.floor(offset + itemCount * this._viewportItemSize * this._sizeRatio);
return offset + itemCount * this._viewportItemSize * this._sizeRatio;
Comment thread
Alyar666 marked this conversation as resolved.
}

private getContentOffset(type) {
Expand Down
12 changes: 11 additions & 1 deletion packages/testcafe-models/dataGrid/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -193,10 +193,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());
}
Expand Down Expand Up @@ -965,8 +973,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');

Expand Down
Loading