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 “”;

};

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

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:

http://i.imgur.com/NNnqu.jpg

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:”

“},

{name:”3″, past:”400.00″, present:”800.00″, status:”

“},

{name:”4″, past:”200.00″, present:”400.00″, status:”

“},

{name:”5″, past:”300.00″, present:”500.00″, status:”

“},

{name:”6″, past:”400.00″, present:”600.00″, status:”

“},

{name:”9″, past:”400.00″, present:”450.00″, status:”

“}

];

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.

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.