How to make a progress bar while loading datatable with LoadNext?

Webix JS
#1

I understand that LoadNext is as a way to keep the workload under control, over client and server app on large database itens. Can you supply an example on how to progress a bar in such case? I always know the itens to be downloaded to datatable, previously obtained by a query.

#2

Hello @OsmarMartinelli,

Can you supply an example on how to progress a bar in such case?

By default, when you extend the component to include the ProgressBar mixin, a progress icon will be automatically shown each time the loading is happening, for example - https://snippet.webix.com/9pzbx2n2.

If you wish to show the progress bar specifically, then you will have to manually call the showProgress method (type “bottom” or “top” to display a progress bar) before calling loadNext - https://snippet.webix.com/p6g9epdh.

1 Like
#3

Thanks Dzmitry … I think we are almost there. The progress bar in second snippet(my case) is being reseted on each LoadNext call. What I realy want is progress bar lives during the entire loading of datatable, Progress bar shoud grow progresivelly reaching 100% at the end of datatable load. In the sample suplied “Pagers” are being used to call LoadNext, but one could used others events like a timer, onclick etc. My current test code is using onAfterLoad event to call LoadNext again and again.

#4

Unfortunately, I don’t think that the built-in ProgressBar mixin will be suitable for this task. It seems that the bar will disappear when the loadNext() method is called.

As an alternative, I suggest using a custom template that depends on the data that was passed in. In this case, you will need the total number of records and the index of the item that is about to be loaded. Here is an example: https://snippet.webix.com/fxbtspht.

1 Like
#5

Thanks for the suggestion. I have defined a custom progressbar using html and work fine. Now, I was wondering if LoadNext() could supply an EOF end-of-file information after last data item/block is loaded. Should be usefull to improve end process check.

#6

Hey @OsmarMartinelli,

Now, I was wondering if LoadNext() could supply an EOF end-of-file information after last data item/block is loaded.

I’m not quite sure what you mean by this. The loadNext() method is simply responsible for forming server request queries with the parameters you’ve provided. For example, there is no way to know the total amount of records unless it’s being returned from the server. So, in essence, the information specifying the end of file should also be returned from the server.

#7

I was thinking in maybe a parameter with information like “no more records to load”, placed by a callback or an onAfterloadNext event. But no problem , Its clear to me that I need stop calling loadNext after the total database table count has reached. Thanks you.