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

Question

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 1

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.