Madasu K Madasu K - 6 months ago 239
AngularJS Question

Angularjs ui grid cell Template should use cell value in its template rendering

I am using Angularjs ui grid, I need small help in cell Template rendering. In each row the first column should show the progress bar based on the value of the cell. So I have used the following in my controller :

var ctrl = this;

ctrl.gridOptions = {};

ctrl.gridOptions.columnDefs = [{
field: 'completeStatus',
cellTemplate: ' <uib-progressbar value="55"> </uib-progressbar>',
width: 100
},

{
field: 'invoiceNum'
}
];

ctrl.gridOptions.data = [{
"completeStatus": "70",

"invoiceNum": "2332324"
}, {
"completeStatus": "50",

"invoiceNum": "1221123"
}, {
"completeStatus": "20",

"invoiceNum": "-"
}];


html:

<div id="regGrid" ui-grid="ctrl.gridOptions" class="reg-grid"></div>


I have used ui bootstrap progress bar which is working fine for the above settings. But each and every progress bar shows
55%
because I have hardcoded the value. Now I want to change the progress bar value based on the value in the "completeStatus" field. So I have changed the
cellTempalate
to

cellTemplate: '<span> '+ completeStatus +' </span> <uib-progressbar value='+ completeStatus + '> </uib-progressbar>'


But it is not working. I want my progress bar to use the value of the cell and also I want to display that value in the span. can any one help me in fixing this?

Answer

Try this:

<span>{{row.entity.completeStatus}}</span> <uib-progressbar value='row.entity.completeStatus'></uib-progressbar>

This way you're telling ui-grid to interpolate the row's object that has the completeStatus property.