Virtualization scroll issue

[Surya]

https://www.loom.com/share/01b5c06055e0441282873e5af573e705

Hi

When I directly scroll to bottom of virtualization table its always having some scroll issue, you can check it in my video and also my table row size is not same for all records.

[Thiyagu Subramani]

Hi Ashok, 

We checked your reported problem and based on your shared information. But unfortunately we were unable to reproduce the problem from our end. We have shared the sample for your reference below, 

Sample link: https://ej2.syncfusion.com/javascript/demos/#/material/grid/virtual-scrolling.html 

So can you please share us the following information to validate further on this, 

• Have you bound local or remote data to the Grid? If remote data which adaptor have you used.
• Are any console errors thrown?
• Grid code file.
• Syncfusion package version used.
• Share how much data(count) loaded to the Grid.

 

Regards, 

Thiyagu S 

[Surya]

https://stackblitz.com/edit/angular-ivy-tap36y?file=src/app/app.component.html

Directly drag the scroll bar to end then you will see some fluctuations at end of scroll and also it will move to little top even we scroll it for end of the grid

[Thiyagu Subramani]

Hi Ashok, 

Thanks for your update. 

By default in EJ2 Grid, the default scrollbar will be displayed in the grid when content exceeds the element width or height. The vertical and horizontal scrollbars will be displayed based on the following criteria: 

• The vertical scrollbar appears when the total height of rows present in the grid exceeds its element height.
• The horizontal scrollbar appears when the sum of columns width exceeds the grid element width.
• The height and width are used to set the grid height and width, respectively.

But based on your shared information we suspect that your reported issue may occurs while using customized scroller (modified default scroller) in your application. Please refer to the blow sample with our default scroller. Its works perfectly. So, we suggest to use our default scroller to achieve this requirement. 

Sample link: https://stackblitz.com/edit/angular-ivy-erdnhw?file=src%2Fapp%2Fapp.component.css 

UG : https://ej2.syncfusion.com/angular/documentation/grid/virtual/ 

      : https://ej2.syncfusion.com/angular/documentation/grid/scrolling/ 

If its not fulfill your requirement, please share the purpose of this customized scroller to us. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[Surya]

https://stackblitz.com/edit/angular-ivy-erdnhw?file=src%2Fapp%2Fapp.component.css

Even with default scroll if I drag the scroll to end of scroll its showing some scroll left we can see in the below link 

https://www.loom.com/share/2c7283e1bae5499ca22316c24c2c445a

[Thiyagu Subramani]

Hi Ashok, 

Thanks for your update. 

Based on your shared information we suspect that you are using allowTextWrap property in your application. By default in EJ2 Grid we do not have support for textWrap with virtual scrolling feature. Its default behavior. Please refer to the below link for more reference. 

Limitations :  https://ej2.syncfusion.com/angular/documentation/grid/virtual/#limitations-for-virtualization –  Please refer the 8^th point. 

 

For this we suggest you can specify the row height as all the table rows are in same height.  So, here we have applied rowHeight as 38px in sample level to achieve this requirement like below. 

.e-grid .e-row { 

  height: 38px; 

} 

Updated Sample: https://stackblitz.com/edit/angular-ivy-gsvykt?file=src%2Fapp%2Fapp.component.html 

Please get back to us, if you need any further assistance 

Regards, 

Thiyagu S