1. Home
  2. Forum
  3. Angular - EJ 2
  4. Issue when turning on Virtualization mode and scrolling to the bottom of grid

Issue when turning on Virtualization mode and scrolling to the bottom of grid

Hi Syncfusion Team,

I have an issue in my project. I use Grid Component and also turn on the Virtualization mode. When I scroll to the bottom of the grid, I got that issue. I can show you in the sample below.

https://stackblitz.com/edit/angular-nvf4zk-aucls2

Please click the "Toggle Page" button to go to the grid page. When we scroll to the bottom of the grid, the height of the grid suddently changes and then back to the old value (which I set for it before). I opened the console and I can see that: the height of the element "e-content" suddently changes to "auto" and then back to the previous value (400px); and also it seems to keep re-rendering continuously.

And in my real project, When I scroll the the bottom, the height of the element "e-content" changes to "auto" and it keeps that value forever. And it is really a very bad experience. After that, I cannot see the Virtualization mode anymore. It looks like this (two white spaces):
Image_6716_1718273700000

Can you check this ASAP?

Regards,

Nguyen


1 Reply
AR Aishwarya Rameshbabu Syncfusion Team June 18, 2024 01:24 PM UTC

Hi nguyen hoang Phuong,


Greetings from Syncfusion support.


Upon reviewing your query, we have identified that you are facing an issue with utilizing virtualization in the Syncfusion Grid. In order to enable the virtualization feature, it is necessary to inject the virtualScrollService, set enableVirtualization to true, and to define the height property of the Grid. The reported issue appears to stem from a failure to specify the Grid's height. Additionally, it has come to our attention that you are dynamically updating the Grid's height in the beforeDatabound event. Kindly provide insight into the purpose of this scenario so that we may offer a suitable solution. Please refer to the simple sample created in the latest Syncfusion package version based on the shared sample.

Furthermore, we have noticed that you are utilizing an older version of the Syncfusion package. We recommend upgrading to the latest version to access enhanced features and address the white space issue you have encountered. For further information on virtualization feature please refer to the below documentation link.


Sample: https://stackblitz.com/edit/angular-grid-column-initial-minwidth-th4aal?file=src%2Fapp.component.ts,src%2Fapp.component.html,package.json

Documentation Link: virtual-scrolling



Regards

Aishwarya R


Loader.
Up arrow icon