View Full Version : Using a progress bar in a grid

16 Aug 2013, 1:36 PM
I have a grid, with an no paging (using infinite scrolling). I intend to have a bbar in the grid which will have a progress bar to indicate that more data is being fetched from the server. I am using an Ajax request call to the server to load the next 100 data after the initially loaded 100 when the grid was first rendered i.e. when the scroll bar its the botttom of the grid, it automatically fetches the next 100 record from the server. How do I ensure that my progress bar works perfectly as the time taken to load the record from the server might defer. Any suggestions will be appreciated.

19 Aug 2013, 2:59 AM
ANy tips on this ?

19 Aug 2013, 8:25 AM
The only way you could make it match perfectly is to have the progress bar progress for an amount of time you set and make sure it's absolutely longer than your server would ever take to return the 100 records. And then once that time is reached you append the fetched records to your grid. To me this enforces a wait time and would be longer than the user would have to wait had you allowed the response to be appended right when it was received.

19 Aug 2013, 9:16 AM
thanks slemmon for always being helpful. Am thinking of an alternative way like displaying a spinning image with text stating loading on the bottom bar, how do you think I can achieve this, sample code will be appreciated.

19 Aug 2013, 10:31 AM
What about using grid.getEl().mask('loading text here', 'x-mask-loading');

You could certainly put text / img in a toolbar, but the convention for loading a grid's store has the grid masked by default. If it were me I'd re-mask the grid during each subsequent load as well for a consistent user experience.