Messages

1

Help for ParamQuery Grid (free version) / Re: adding jQuery object to PQgrid cell

« 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

2

Help for ParamQuery Grid (free version) / adding jQuery object to PQgrid cell

« 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?