ParamQuery grid support forum

General Category => Help for ParamQuery Grid (free version) => Topic started by: adamf on July 12, 2013, 06:13:05 am

Title: adding jQuery object to PQgrid cell
Post by: adamf on July 12, 2013, 06:13:05 am

I am trying to build a grid with progressbars (http://api.jqueryui.com/progressbar/) in one column and numeric/text data in other columns.  Perhaps someone can point me in the right direction.  I've done my share of javascript but am new to jquery and PQgrid, both seem fantastic.

My first problem was adding a jquery object (e.g. var obj = $('<div class="progress"><span>0%</span></div>');)  to a cell in my PQgrid..  i tried referencing the obj in dataModel.data, but I end up with the string "[Object Object]" in the cell..  note: I add my progressbars to the obj above with:

   $(".progress").each(function() {
      $(this).progressbar({
         value: 70
      }).children("span").appendTo(this);
   });

Any suggestions?

Title: Re: adding jQuery object to PQgrid cell
Post by: paramvir on July 12, 2013, 07:26:14 pm

1) Store progress values as integers e.g. 0, 20, 40, etc in dataModel.data

2) use column.render callback to return the markup "<span class='progress'>"+celldata+"</span>"

3) use refresh event to draw the progress bars

http://paramquery.com/api#event-refresh

 $(".progress").each(function() {
      $(this).progressbar({
         value: $(this).text()
      })
   });

Title: Re: adding jQuery object to PQgrid cell
Post by: adamf on July 16, 2013, 04:23:21 am

Thanks, that worked.  Although I'm sure that my code could be a lot better.

One issue: I'm seeing that my grid flickers nearly every time it's updated with the refresh event (worse in safari and chrome than FF).  I must be doing something wrong.   Here's my code:

<script type="text/javascript">

$(document).ready(function() {

  function renderProgressBarDiv(ui)
  {
    return '<div class="progress"><span>' +ui.rowData.percent_done+'%</span></div>';
  }

   function createProgressBarGrid()
   {
      dat = [
         { slot_num:1, percent_done:0, status_msg:"test in progress" },
         { slot_num:2, percent_done:0, status_msg:"test in progress" } ];


      var obj = { flexHeight: true };
      obj.colModel = [{ title: "SLOT", width: 75, dataIndx:'slot_num', dataType:'integer'  },
                      { title: "PROGRESS", width: 175, dataIndx:'percent_done', render:renderProgressBarDiv },
                      { title: "STATUS", width: 350, dataIndx:'status_msg', dataType:'string' }];
      obj.dataModel = { data: dat};

      obj.topVisible = false;
      obj.bottomVisible = false;
      obj.numberCell = false;
      obj.columnBorders = false;
      obj.rowBorders = false;
      obj.editable = false;
      obj.hoverMode = false;
      obj.sortable = false;
      obj.scrollModel = {vertical:false, horizontal: false};

      obj.refresh = function(event,ui) {
         $(".progress").each(function(event,ui) {
            $(this).progressbar({
               value:parseInt( $(this).text() )
            }).children("span").appendTo(this);
         });
      }
      $("#progressBarGrid").pqGrid(obj);

      var $grid = $("#progressBarGrid").pqGrid(obj);
    }


  function update_progress()
  {
      curr_dat = $("#progressBarGrid").pqGrid("option", "dataModel").data;

      for (item in curr_dat)
      {
         curr_dat[item].percent_done += 1;
         if (curr_dat[item].percent_done >= 100) { curr_dat[item].percent_done = 0; }
      }
      $( "#progressBarGrid" ).pqGrid( "option", "dataModel", { data: curr_dat } );
  }

   createProgressBarGrid();
   setInterval(update_progress, 100);

});   /* jQuery end */


In my CSS, I have:

.ui-progressbar-value {
   /*
   position:absolute;
   */

   width: 70%;
   font-size: 13px;
   font-weight: bold;
   line-height: 18px;
   padding-left: 10px;
   /*
   width: 70%;
   margin-left: auto;
   */
}

.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}

thanks for any ideas.
-adam