wavezSomeone 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.
wavezI'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.
wavezThe 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.
wavezI 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)
})
},
wavezOkay, 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:
wavezYa, 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 “
“, there is nothing to call jQuery.progressbar().
I can't figure out how to get Formatter to put the
wavezOkay, 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
wavezActually, 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 “
“;
}else {
return $.fn.fmatter.defaultFormat(cellval,opts);
}
};
It seems like I should be able to do something like return $(.progressbar( { value: 37 }
wavezI 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 “”;
};
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top
