Data disappears during InfiniteScrolling

[Daniel]

Hi,

I am using a ej.grids.Grid with

pageSettings: { pageSize: 10 },

infiniteScrollSettings: { initialBlocks: 3 },

enableInfiniteScrolling: true,

and it all works.

When using the unversioned ej2.min.js (https://cdn.syncfusion.com/ej2/dist/ej2.min.js ), there is no problem when new data gets loaded due to the infinite scrolling.

When using the latest ej2.min.js (https://cdn.syncfusion.com/ej2/20.3.50/dist/ej2.min.js ) and I scroll to the end of the currently displayed data, all shown data disappears while the new data is being loaded. Only when the new data has been received, does the data show up again (the previous data and the new one). There is also no Spinner showing up while the new data is being requested.

I have attached two short videos showing the two behaviors.

I would appreciate it if you could have a look into this.

Thank you,

Daniel

Attachment: Archive_53e24ac2.zip

[Vinitha Balasubramanian]

Hi Daniel,

Greetings from Syncfusion support.

Currently, we are validating your reported problem with your shared information, and we will update you the details on 02^rd Nov 2022. Until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Vinitha Balasubramanian]

Hi Daniel,

Thanks for your patience.

We have validated the reported problem at our end, we want to convey We have provided the Loading Indicator support for the Grid from our Vol 3 main Release 20.3.47 version. Kindly refer the attached demos link and sample for your reference.

Demos: https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/grid/loading-animation.html

Sample : https://stackblitz.com/edit/cy2lie?file=index.js,index.html

Please get back to us if you need further assistance.

Regards,

Vinitha Balasubramanian

[Daniel]

Hi Vinitha,

thank you for your response, I missed the change to have an option between a Spinner and Shimmer.

Your demo shows exactly the strange behavior as I mentioned.

1. During the initial load of the data, there is no Spinner shown. (Though if I change your demo to Shimmer, the Shimmer is shown during the load.)If you click the 'load 100k data' button a second time, the Spinner is also shown.
2. When scrolling to the end of the current dataset there is no Spinner shown during  the request to get more data. Instead a Shimmer is shown.
   
3. If you click the 'load 100k data' a second time, the Spinner is also shown.

I have attached a quick screengrab to show that behavior - all with your provided demo. The only change I made is to increase the pagesize to 5,000 so that the process takes a bit longer and to set the Spinner.

Thank you,

Daniel

Attachment: Screen_Recording_20221104_at_08.04.30.mov_625f4c01.zip

[Vinitha Balasubramanian]

Hi Daniel,

Thanks for your update.

Currently, we are validating your reported problem with your shared information, and we will update you the details on 09^th Nov 2022. Until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Vinitha Balasubramanian]

Based on your update, we want to convey that by default “enableVirtualMaskRow” property is “true” in the Grid component on performing virtalScrolling and infiniteScrolling this the cause of the reported problem. We suggested to use enableVirtualMaskRow” property as “false” while performing virtalScrolling and infiniteScrolling. Kindly refer the code and sample for more information.

[index.js]

 

enableVirtualMaskRow: false,

sample : https://stackblitz.com/edit/cy2lie-3su6h4?file=index.js,index.html

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Daniel]

Hi Vinitha,

thank you for your reply.

enableVirtualMaskRow:false does indeed fix the issue with Spinner not showing when using infiniteScrolling - thank you for that!

It does not yet fix that the Spinner is not shown when loading the 100k in your stackblitz example.

(If you change it to 'Shimmer', then it does show while loading the 100k.)

Thank you,

Daniel

[Vinitha Balasubramanian]

We want to convey the below details to know more about the loading indicator feature.

• The grid has an option to show a loading indicator in-between the time of fetching the data and binding it to the grid during initial rendering or refreshing or after performing any grid action.

• We achieved by setting the loadingIndicator.indicatorType property to Spinner or Shimmer to set the loading indicator

• In EJ2 Grid, the default value of the indicator type is “Spinner.”

Please refer the documentation for more information

Documentation : https://ej2.syncfusion.com/documentation/grid/loading-animation/

If we misunderstood your query, kindly share your exact requirement with detailed explanation.