ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: devspec on November 10, 2017, 08:24:57 pm

Title: Progress bar and refresh cells
Post by: devspec on November 10, 2017, 08:24:57 pm

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%)

(http://dl4.joxi.net/drive/2017/11/10/0012/3023/830415/15/9074d0ff0f.jpg)

Thank you for answers!

Title: Re: Progress bar and refresh cells
Post by: paramvir on November 10, 2017, 09:48:47 pm

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()

Title: Re: Progress bar and refresh cells
Post by: devspec on November 10, 2017, 10:13:23 pm

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

Title: Re: Progress bar and refresh cells
Post by: paramvir on November 13, 2017, 04:19:29 pm

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]
        });
      }
    }, {
 ....