Forum
Log In
Home
Topic RSS
Related Topics
23:43
30/05/2012
Offline
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) });
}
01:47
30/05/2012
Offline
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+ "/>";
};
02:28
30/05/2012
Offline
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
03:46
30/05/2012
Offline
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?
04:43
30/05/2012
Offline
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().
13:13
30/05/2012
Offline
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:
02:36
30/05/2012
Offline
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)
})
},
02:54
30/05/2012
Offline
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.
03:58
30/05/2012
Offline
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.
05:53
30/05/2012
Offline
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.
Most Users Ever Online: 715
Currently Online:
50 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
