Grid doesn't switch pages properly; Adding empty rows at bottom of current page

Question

I have a grid the height of which is limited by a surrounding div container. The grid page size is set to 5, which makes it fit into the container. There are two problems with that grid:

#1 When the amount of records in the grid exceeds 5, a second page link is properly displayed, but clicking on the page link doesn't switch to the second page of the grid. The marked row is the 3rd record. It should appear at the top of page #2 or not appear at all because page #2 should only display records #6 and #7.

#2 When I switch to page #2 and back to page #1 while having 6 or more records in the grid and add a single new record, the current page (#1) receives 5 new rows; These are empty and grayed out.

Find a demo project attached here (7zip archive).

Attachment: GridBug_9f01b2b6.7z

Renjith Singh Rajendran · Answer

Hi Dietfrid, 
 
Greetings from Syncfusion support. 
 
We have analyzed the shared sample and we could see that you have enabled both EnableVirtualization and AllowPaging in your application. We would like to inform you that, It is not recommended to enable both the features in a single grid.  
 
So based on your scenario, we suggest you to remove the EnableVirtualization and EnableVirtualMaskRow properties to overcome the reported scenario. 
Reference : https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance#use-paging-or-virtualization-to-load-only-visible-rows 
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R

Dietfrid Mali · Answer

Thank you, removing the virtualization parameters solved the problems.

Renjith Singh Rajendran · Answer

Hi Dietfrid, 
 
Thanks for your update. Please get back to us if you need further assistance. 
 
Regards, 
Renjith R