Format a ui-grid grid column as currency (RC 3.0)

Question

The grid options below display the data as expected. But If I try to to format the row.entity[col.field] value in my cellTemplate, I don't get any data returned.

Code:

$scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
        {name: 'Award Title', field: 'projectTitle', minWidth: 100 },
        {name: 'Amount', field: 'awardAmount', cellTemplate: '<div>{{Number(row.entity[col.field]).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}}
    ]
};

Any guidance on how to format the column as currency is appreciated.

Thanks.

Answer 1

You can use 'currency' cellFilter to format your data.

$scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
        {name: 'Award Title', field: 'projectTitle', minWidth: 100 },
        {name: 'Amount', field: 'awardAmount', cellFilter: 'currency' }}
    ]
};

Answer 2

Have a look at this nice article : http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/

In summary your options are :

• Bindings
• Cell Filters
• Cell Templates
• Links
• Buttons
• Custom directives

I have used the cell Filter option myself (code translated to your case, not tested):

$scope.gridOptions = {
   enableSorting: true,
   columnDefs: [
      {
          name: 'Award Title', 
          field: 'projectTitle', minWidth: 100
      }, {
          name: 'Amount', 
          field: 'awardAmount', 
          cellFilter: 'currencyFilter'
      }
   ] 
};

With filter defined hereunder :

app.filter('currencyFilter', function () { 
    return function (value) {
        return value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    }
});    

Cheers, G