Kendo Grid Angular - Jump scrolling when adding / removing rows with virtual scrolling

I have 2 Kendo Grids in my Angular application. In the 1st one, I use "virtual scrolling" because we have a lot of data (e.g. 10K records). The 2nd one is a "basic" Kendo Grid.

The functionality I want to achieve is to have the ability to "remove" (or hide - I don't know) the selected row from the 1st grid and add it to the 2nd one. The issue that I'm dealing with, is that if I transfer - let's say - 10-20 rows, when I start to scroll in my "virtual scrolling" grid, there is an annoying jump scrolling. I think that this "bug" is due to "hide" attribute that I'm adding to each removed row.

Virtual Scrolling Grid:

<kendo-grid
#grid1 id="ours"
(click)="onGridClick(0)"
class="mb-1"
[data]="gridViewN"
[kendoGridBinding]="gridDataN"
[skip]="skipN"
[pageSize]="pageSizeNV"
scrollable="virtual"
[rowHeight]="24"
[style.height]="'33%'"
[rowClass]="rowCallback"
[sortable]="sortSettings"
[filterable]="'menu'"
[loading]="isLoadingN"
[navigable]="true"
[resizable]="true"
appGridCopy
[selectable]="{ mode: 'single' }"
[(selectedKeys)]="selectedRowInGrid[0]"
kendoGridSelectBy="ID"
(pageChange)="pageChange($event, 'N')"
(sortChange)="sortChange($event, 'N')"
(dblclick)="onDblRowClick(grid1, $event, 'N')"
(keydown)="onKeyDown($event, grid1, 'N')"
(filterChange)="filterChange($event)"
(cellClick)="onCellClick($event)">


Move row with 'Enter' key:

onKeyDown(event: KeyboardEvent, grid: any, gridID: 'N' | 'V' | 'selected') {
event.preventDefault();
switch (event.key) {
case 'Enter':
if (gridID === 'N' || gridID === 'V') {
this.addToSelectedTable(grid, gridID);
}
break;
case 'Backspace':
if (gridID === 'selected') {
this.removeFromSelectedTable(grid);
}
break;
}
}

addToSelectedTable(grid: any, gridID: 'N' | 'V') {
let row = grid.activeRow.dataItem;
let item: any;

if (gridID === 'N') {
item = this.gridDataN.find(x => x.ID === row.ID);
this.lastPrevIndexN = this.gridViewN.data.findIndex(tempItem => tempItem.ID === item.ID);
row.from = 'N';
} else {
item = this.gridDataV.find(x => x.ID === row.ID);
this.lastPrevIndexV = this.gridViewV.data.findIndex(tempItem => tempItem.ID === item.ID);
row.from = 'V';
}
if (item) {
row.newId = this.activeRow;
this.gridSelected.push(structuredClone(row));
this.activeRow++;
this.gridSelectedSort = this.gridSelected.slice(0);
item.hide = true;
}
this.loadRows(gridID);
this.getSelectedTotal();
this.getNextRowInGrid(gridID);
}

Continue reading...