Sotiris
Top achievements
Rank 1
Rank 1
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);
}
Hi Sotiris,
Thank you very much for the details provided.
From what I understand from your question, you are currently utilizing the Kendo UI for Angular Grid together with its built-in virtualization feature and are experiencing issues upon deleting rows inside the component. Please, let me know if I misinterpreted the query.
Based on the information provided in the thread so far, I tried reproducing the issue with the scroll jump in a Grid with virtualization enabled and a similar configuration to the one from the code snippet. However, it seems like I might be missing out on some of the reproduction steps since the component appears to behave according to the expectations.
For your reference, I am sending you below the StackBlitz demo where I performed the testing:
With that being said, it is important to mention that while I was reviewing the code snippet, I noticed a few configuration specifics in the Grid that might affect the component's behavior and the scroll jumps.
Generally speaking, when the developer binds data to the Grid, our team recommends using either the built-in GridBindingDirective or the manual binding approach using the data property. For more detailed information, please refer to the following articles:
Another possible reason that might cause the discrepancy is the value set to the rowHeight property. By default, the value set to this property should reflect the actual DOM height of the rows inside the component:
Furthermore, it is also worth noting that the developer would need to set the height of the Grid component:
In case the requirement for the implementation is to have a dynamic height for the Grid component, I would suggest checking out the following Knowledge Base article:
In these lines of words, it is also worth noting that when the developer handles multiple data operations, our team recommends using the built-in dataStateChange event:
In case none of the provided information helps you resolve the issues with the virtualization upon the deletion of items, I would ask you to provide more detailed information about the specifics of the implementation or, ideally, send a small runnable example demonstrating the discrepancy. This would allow me to reproduce it on my side, debug it, and thus come up with a more suitable suggestion.
Please, let me know how it goes.
Regards,Georgi
Progress Telerik