| User | Post |
|
23:43
30/05/2012
|
wavez
| | | |
| Member | posts 10 |
|
|
Post edited 23:45 – 30/05/2012 by wavez
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
31/05/2012
|
wavez
| | | |
| Member | posts 10 |
|
|
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
31/05/2012
|
wavez
| | | |
| Member | posts 10 |
|
|
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
31/05/2012
|
wavez
| | | |
| Member | posts 10 |
|
|
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
31/05/2012
|
wavez
| | | |
| Member | posts 10 |
|
|
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
31/05/2012
|
wavez
| | | |
| Member | posts 10 |
|
|
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
|
|
|
02:36
04/06/2012
|
wavez
| | | |
| Member | posts 10 |
|
|
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)
})
},
http://i.imgur.com/ltXwI.png
|
|
|
02:54
04/06/2012
|
wavez
| | | |
| Member | posts 10 |
|
|
Post edited 02:56 – 04/06/2012 by wavez
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
07/06/2012
|
wavez
| | | |
| Member | posts 10 |
|
|
Post edited 04:52 – 07/06/2012 by wavez
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/
|
|
|
05:53
07/06/2012
|
wavez
| | | |
| Member | posts 10 |
|
|
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.
|
|
Login 
Register 
Search 
Forum
Print this Post 
Topic RSS 
