Author Topic: Progress bar and refresh cells  (Read 3032 times)

devspec

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 8
    • View Profile
Progress bar and refresh cells
« 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%)



Thank you for answers!

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6122
    • View Profile
Re: Progress bar and refresh cells
« Reply #1 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()
« Last Edit: November 10, 2017, 10:01:14 pm by paramquery »

devspec

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 8
    • View Profile
Re: Progress bar and refresh cells
« Reply #2 on: November 10, 2017, 10:13:23 pm »
Can you please provide me a sample of integration of jqui progress bar to pqgrid cell?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6122
    • View Profile
Re: Progress bar and refresh cells
« Reply #3 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]
        });
      }
    }, {
 ....