It isn't a good idea to load a large data after edit and save a row. So please set the 'lazy' to true to turn on the lazy mode.
<eui-datagrid #dg style="height:250px"
[virtualScroll]="true"
[lazy]="true"
[data]="data"
[total]="total"
idField="inv"
selectionMode="single"
[(selection)]="selection"
[pageNumber]="pageNumber"
[pageSize]="pageSize"
[rowHeight]="rowHeight"
(pageChange)="onPageChange($event)"
>
<eui-grid-column field="inv" title="Inv No"></eui-grid-column>
<eui-grid-column field="name" title="Name"></eui-grid-column>
<eui-grid-column field="amount" title="Amount" align="right"></eui-grid-column>
<eui-grid-column field="price" title="Price" align="right"></eui-grid-column>
<eui-grid-column field="cost" title="Cost" align="right"></eui-grid-column>
<eui-grid-column field="note" title="Note"></eui-grid-column>
</eui-datagrid>
After saving the row, reload only this row and update to the dataset.
const index = this.data.indexOf(this.selection);
if (index >= 0){
let row = ... // the new row
let data = this.data.slice();
data.splice(index, 1, row);
this.data = data;
this.selection = row;
}
If you really want to use un-lazy mode, update the specified row and then refresh the virtual scroll view.
if (this.selection){
Object.assign(this.selection, { // update the current row
name: 'name updated'
})
this.dg.view2.body.vscroll.refresh(); // refresh the virtual scroll view
}