Title: How to show progress in treegrid? Post by: sipingsoft on August 21, 2012, 03:57:22 AM As seeing the treegrid demo(TreeGrid Footer Row), you can see the progress bar.
Do you know how to show it? ??? Title: Re: How to show progress in treegrid? Post by: sipingsoft on August 21, 2012, 04:22:54 AM I found the answer myself.
$(function(){ $('#test').treegrid({ title:'TreeGrid', iconCls:'icon-ok', width:700, height:250, rownumbers: true, animate:true, collapsible:true, fitColumns:true, url:'treegrid_data2.json', idField:'id', treeField:'name', showFooter:true, rowStyler:function(row){ if (row.persons > 1){ return 'background:#AAD684;color:#fff'; } }, columns:[[ {title:'Task Name',field:'name',width:180}, {field:'persons',title:'Persons',width:60,align:'right'}, {field:'begin',title:'Begin Date',width:80}, {field:'end',title:'End Date',width:80,rowspan:2}, {field:'progress',title:'Progress',width:120,rowspan:2, formatter:function(value){ if (value){ var s = '<div style="width:100%;background:#fff;border:1px solid #ccc">' + '<div style="width:' + value + '%;background:red">' + value + '%' + '</div>' '</div>'; return s; } else { return ''; } } } ]] }); }); we can customize the output html for fields. And it shows progress bar by css. It was very easy to show progress bar. ;) |