How to show progress in treegrid?

[sipingsoft]

As seeing the treegrid demo(TreeGrid Footer Row), you can see the progress bar.
Do you know how to show it?

 

[sipingsoft]

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.