jQuery Grid Plugin - jqGrid - Topic: progress bar cells

wavez on progress bar cells

Thu, 07 Jun 2012 05:53:25 +0300

Someone on IRC suggested changing the sort order right after the grid is loaded. I found the code ".trigger('reloadGrid')" in a stackoverflow post, so I added that after the grid is resized after the data is loaded. That did the trick.

http://jsfiddle.net/wavez/sMzYW/5/

Last line of code:

$("#reports"+i).jqGrid('setGridWidth',width,true).trigger('reloadGrid');

I think this is kind of hack-ish, and I would really appreciate it if someone would actually reply to my thread and suggest a better solution. Thanks.

wavez on progress bar cells

Thu, 07 Jun 2012 03:58:58 +0300

I'm still having the issue that I can't figure out how to design this so that gridComplete() only calls once, both when the data is loaded, and when the sort order is changed on the grid.

Here is my code on jsfiddle. Instead of adding progress bars, I'm appending an exclamation mark to the content of cells in the last column.

http://jsfiddle.net/wavez/sMzYW/2/

wavez on progress bar cells

Mon, 04 Jun 2012 02:54:49 +0300

The problem is how the data is being loaded into the grid (I took this code from the demos since this was an easy place to start learning).

var mydata = [

{name:"2", past:"300.00", present:"900.00", status:"<div class="meter">320.0</div>"},

{name:"3", past:"400.00", present:"800.00", status:"<div class="meter">430.0</div>"},

{name:"4", past:"200.00", present:"400.00", status:"<div class="meter">210.0</div>"},

{name:"5", past:"300.00", present:"500.00", status:"<div class="meter">320.0</div>"},

{name:"6", past:"400.00", present:"600.00", status:"<div class="meter">430.0</div>"},

{name:"9", past:"400.00", present:"450.00", status:"<div class="meter">100.0</div>"}

];

for(var j=0; j<=mydata.length; j++) { jQuery("#reports"+i).jqGrid('addRowData',j+1,mydata[j]) }

}

If someone could suggest another way to load the data so that I won't have this problem, that would be great.

wavez on progress bar cells

Mon, 04 Jun 2012 02:36:16 +0300

I changed to code to debug the issue. This is obviously the problem. I'm not sure how to fix it yet.

gridComplete: function(){

$(this).find("div.meter").each(function(){

$(this).text($(this).text()+' '+i)

})

View post on imgur.com

wavez on progress bar cells

Thu, 31 May 2012 13:13:25 +0300

Okay, so I realized there's more documentation that I haven't been finding. There's no index to navigate the methods and such?

I added this function to my grid:

gridComplete: function(rowid, rowdata, rowelem){

$(this).find("div.meter").each(function(){

$(this).text('').progressbar({ value: Math.floor(Math.random() * 100, 100) })

})

The good news is that I get all my progress bars showing up when the sorting order is changed. The bad news is that only one of my progress bars are drawing correctly when the table is first created. Here's a screen shot:

View post on imgur.com

wavez on progress bar cells

Thu, 31 May 2012 04:43:08 +0300

Ya, I have to find a way to create the progress bar when pws_progressbar() is called, because when the user changes the sort order on the table, all the progress bars are destroyed because every row is destroyed and recreated. Since my custom function, pws_progressbar() only returns "<div class='meter'>stuff is here</div>", there is nothing to call jQuery.progressbar().

I can't figure out how to get Formatter to put the <div> tags in the cells and then call .progressbar().

wavez on progress bar cells

Thu, 31 May 2012 03:46:37 +0300

Okay, I kind of got it working. I have a question still though, so please look for that at the bottom in this reply.

I'm using the Formatter to put a div into the cells in one column, and then I'm calling .progressbar() on each of those divs. This is my colModel:

colModel:[

{name:'name', index:'name', width:(0.1*width), align:"center", sorttype:"int", editable:false},

{name:'past', index:'past', width:(0.15*width), align:"center", sorttype:"float", editable:false},

{name:'present', index:'present', width:(0.15*width), align:"center", sorttype:"float", editable:true, edittype:'custom', editoptions:{ custom_element:my_input, custom_value:my_value} },

{name:'status', index:'status', width:(0.6*width), align:"center", sorttype:"float", editable:false, formatter:pws_progressbar }

And this is the function:

function pws_progressbar() {

return "<div class='meter'>stuff is here</div>";

}

I have my jQuery().jqGrid({}) inside of $(document).ready(function() {______} );

After all of that, this part puts the progress bars on the page:

$(function(){

$(".meter").each(function() {

$(this).text("").progressbar({ value: Math.floor(Math.random() * 100, 100) })

})

});

My question is, wouldn't it be better to put the progress bars on the page inside pws_progressbar()? And, how would I do that?

wavez on progress bar cells

Thu, 31 May 2012 02:28:50 +0300

Actually, the email function on line 5016 might be easier for me to start with. I'm thinking all copy that function and change it to insert a div with a certain ID and class, and then I'll just create my progress bars from those on document ready. The code might be something like this:

$.fn.fmatter.progressbar = function(cellval, opts) {

if(!$.fmatter.isEmpty(cellval)) {

return "<div class="progressbar" id="" + cellval + "">progress bar</div>";

}else {

return $.fn.fmatter.defaultFormat(cellval,opts);

}

};

It seems like I should be able to do something like return $(.progressbar( { value: 37 } ));

I have very little experience with both jQuery and JS though, and I don't know how to do this yet

wavez on progress bar cells

Thu, 31 May 2012 01:47:58 +0300

I am thinking that I will have to add a function in jquery.jqGrid.src.js. I'm thinking that I can copy the code that adds a checkbox to a cell, and modify it to add a progress bar instead. From line 5023, I think this is the section I need:

function(cval, opts)

{

var op = $.extend({},opts.checkbox), ds;

if(!$.fmatter.isUndefined(opts.colModel.formatoptions)) {

op = $.extend({},op,opts.colModel.formatoptions);

}

if(op.disabled===true) {ds = "disabled="disabled"";} else {ds="";}

if($.fmatter.isEmpty(cval) || $.fmatter.isUndefined(cval) ) {cval = $.fn.fmatter.defaultFormat(cval,op);}

cval=cval+"";cval=cval.toLowerCase();

var bchk = cval.search(/(false|0|no|off)/i)<0 ? " checked='checked' " : "";

return "<input type="checkbox" " + bchk + " value=""+ cval+"" offval="no" "+ds+ "/>";

};

wavez on progress bar cells

Wed, 30 May 2012 23:43:36 +0300

I am working on a problem right now; I am wanting to put progress bars in one column on my grids. I have been able to do this with conventional tables and the jQuery progressbar object, but haven't figured out how to put those bars into a jqGrid.

I'm using one of the demos as an example for adding custom elements to cells:

Navigate to trirand.com/ demos->"New in version 3.6″->"Create Custom input element".

In this demo, one method of injecting custom elements into the grid is shown. I was able to make this demo work for the intended edit-field feature, when a row is selected, but I haven't figured out how to turn one cell into a progress bar.

function pws_progressbar() {

return $(this).progressbar({ value: Math.floor(Math.random() * 100, 100) });

}