Display progress bar inside JQGrid

Considered displaying a JQuery progress bar inside JQGrid. Here is a small example how this can be achieved.

Consider the json data returned by a web service is as follows:-

{  
"page":"1",  
"total":1,  
"records":"5",  
"rows":[  
{"id":"1","cell":["1","Scott","US","
10
"]},  
{"id":"2","cell":["2","Charles","UK","
20
"]},  
{"id":"3","cell":["3","Dan","Astralia","
30
"]},  
{"id":"4","cell":["4","Chris","Canada","
25
"]},  
{"id":"5","cell":["5","Paul","China","
80
"]}  
]}  

Here is the script that would achieve the results

jQuery("#grid").jqGrid({  
 url:'GetDetails.asmx?team=All',  
 datatype: "json",  
 colNames:['ID','Name','Country','Progress'],  
 colModel:[  
 {name:'id',index:'id', width:55},  
 {name:'Icon',index:'Icon', width:90},  
 {name:'name',index:'name asc, invdate', width:100},  
 {name:'designation',index:'designation', width:80}],  
 rowNum:10,  
 rowList:[10,20,30],  
 pager: '#pager',  
 sortname: 'id',  
 viewrecords: true,  
 sortorder: "desc",  
 caption:"JSON Data"  
}); 

$('div.progBar').each(function(index) {
    var progVal = eval($(this).text());
    $(this).text('');
    $(this).progressbar({
  value: progVal
 });

});

JQGrid would display the required results and once done update the JQGrid cell data with the progress bar required.



“In a room full of top software designers, if two agree on the same thing, that’s a majority.”
– Bill Curtis