Progress bar and refresh cells

[devspec]

Hi guys!

Didn't found the answer not here nor in google, so...

I have a list of json objects like

Code: [Select]

[
{
    status : 0,
    progress: 75,
    count: 1432
},
{
    status : 1,
    progress: 100,
    count: 435
},
...
]

I reload it with ajax from my server every 5 seconds. List can be more than 10000 records.

How to:
1. Add a simple progress bar to cell that will be changed after every reload of json?
2. How to refresh only the cells with "count" and "progress" binding and only with progress value < 100? I don't need to refresh rows/cells than already done (progress=100%)



Thank you for answers!

[paramvir]

jQueryUI progress bar can be used as a render or postRender in the cells.

https://jqueryui.com/progressbar/


Refreshing whole view is faster and lot simpler than individual refreshing the cells unless there are very few cells.

Load the json data every 5 seconds and call refreshView()

grid.option('dataModel.data', data)
grid.refreshView()

[devspec]

Can you please provide me a sample of integration of jqui progress bar to pqgrid cell?

[paramvir]

Please check this: http://jsfiddle.net/h4rmbx70/

Code: [Select]

    postRenderInterval: -1,
    virtualX: true,
    colModel: [{
      title: "Rank",
      width: 100,
      dataType: "integer",
      dataIndx: "rank",
      render: function(ui) {
        return '<div class="progressbar"></div>';
      },
      postRender: function(ui) {     
        this.getCell(ui).find(".progressbar").progressbar({
          value: ui.rowData[ui.dataIndx]
        });
      }
    }, {
 ....