1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Show spinner while loading data (InfiniteScrolling: true)

Show spinner while loading data (InfiniteScrolling: true)

Hi,

I have a grid using ej.data.WebApiAdaptor() and set enableInfiniteScrolling to true - and all works nicely. Data gets loaded and when at the end of the downloaded data, the grid requests and then displays the newly received data.

Unfortunately I cannot figure out how to show a spinner every time data is getting requested (at the initial load and then every time the grid requests new data).

While I know how to use spinners, I do not know when to trigger them in the scenario of infiniteScrolling.

Any help would be greatly appreciated.

Thanks,

Daniel



5 Replies
RS Rajapandiyan Settu Syncfusion Team September 27, 2021 09:16 AM UTC

Hi Daniel,  
  
Thanks for contacting Syncfusion support. 

By default, the Grid will show the spinner when it request the next page records from the server and hide the spinner once the next page data loaded in the Grid. Find the simple sample for your reference. 



Before proceeding with query we need some clarification on your requirement. So kindly share the below details to provide a better solution. 

  1. Are you want to show the custom spinner instead of default spinner?
  2. What is your requirement, explain in detail?
  3. Share the complete Grid code files.
  4. Share the Grid packages version.
  5. Share the video demo of reported problem.
 
Note: 
In infiniteScrolling feature, Grid request first 3 pages records from the server at initial render and it works like the lazy loading concept, which means the buffer data is loaded only when the scrollbar reaches the end of the scroller. In InfiniteScrolling feature the grid request next block records only if the vertical scroller reaches the bottom.  

 
Regards, 
Rajapandiyan S 


DA Daniel September 27, 2021 09:58 AM UTC

Hi Rajapandiyan,


thank you for your information.

As I am using InfiniteScrolling, there is no 'next page' which shows the spinner. (If I am disabling InfiniteScrolling, the spinner shows up when going to the next page - so that's working all fine).


To your questions:

  1. Are you want to show the custom spinner instead of default spinner?
No, the default is fine.

2. What is your requirement, explain in detail?

As you write, once the user reaches the end of the scroller, InfiniteScrolling requests more data - and that's when the spinner should show up. Otherwise the user doesn't know if he reached the end of the current loaded dataset, or if there is more on the server to be loaded.

My data request times are quite long for some data (sometimes > 10 seconds), so if there is no spinner, the user is left hanging if more data will show up or not.


3. Share the complete Grid code files.

It is a standard grid:

var grid = new ej.grids.Grid({
dataSource: syncfusionData,
allowSorting: true,
allowMultiSorting: true,
allowReordering: true,
allowResizing: true,
allowExcelExport: true,
toolbar: ['ExcelExport'],
pageSettings: { pageSize: 50 },
infiniteScrollSettings: { initialBlocks: 3 },
enableInfiniteScrolling: true,
columns: [
{ field: 'DST IP', type: 'string', width: 140 },
{ field: 'DST Hostname', type: 'string', width: 240 },
//...

],
childGrid: {
dataSource: syncfusionDataIPThreatGridData,
queryString: 'DST IP',
columns: [
{ field: 'SRC IP', type: 'string', width: 155 },
//...
],
},
});


4. Share the Grid packages version.

    version : 19.2.62

5. Share the video demo of reported problem.

Please find it attached. When I wiggle the mouse pointer, that's when I would like a spinner to show up - as the user doesn't know that there is a new data request being processed in the background. He only sees that once the new data shows up.


Thank you very much,

Daniel


Attachment: Screen_Recording_20210927.mov_926439e2.zip

RS Rajapandiyan Settu Syncfusion Team September 28, 2021 12:12 PM UTC

Hi Daniel,  
  
Thanks for your update. 

We are tried to reproduce the reported behavior, but it was unsuccessful at our end. Find the below sample and video demo for your reference. 



Kindly share the below details to replicate the problem at our end. 

  1. Share the complete Grid code files (index.js).
  2. Which style theme you have referred?
  3. Do you have customized the spinner element in your project?
  4. Did you execute the hideSpinner/ showSpinner methods during the Grid actions?
  5. Share the issue reproducible sample which will be very helpful to provide a solution at earlier.
 
Regards, 
Rajapandiyan S 


DA Daniel September 28, 2021 05:31 PM UTC

Hi Rajapandiyan,


thank you for your response.


This is strange indeed. I could not identify any relevant discrepancies between your and our code.

Please find attached a reduced sample project and also a video of how this project looks at our end. You will see that there is no spinner showing up at the beginning or when the InfiniteScrolling requests more data.

(Though when we call the 'get_syncfusionAssetGridData(null,"<some filter>")' function, it also requests more data, though this time the standard spinner shows up.)


Compared to our sample shared yesterday, we have removed the ChildGrid part of the code as we have been informed that this is not supported together with InfiniteScrolling.


Regards,

Daniel



Attachment: Archive_bde13bf9.zip

RS Rajapandiyan Settu Syncfusion Team September 29, 2021 12:22 PM UTC

Hi Daniel,  
  
Thanks for your update. 
 
We have created a new incident under your Direct trac account to follow up with this query. We suggest you follow up with the incident for further updates. Please log in using the below link.

https://www.syncfusion.com/account/login  
  
Regards,  
Rajapandiyan S  


Loader.
Up arrow icon