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.

Sisterhood

Are you getting any errors in the console? Not sure what the purpose of the replace() part of your expression is as toFixed() should give you what you want, but that doesn't seem to be the issue here. – Fugato

No errors in the console. My objective is that if I get back '1234' for the amount, I want it formatted as $1,234.00. – Sisterhood

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' }}
    ]
};

Bushman

This is the simplest way rather than coding your own. You can also customize for currency symbol and number of decimal places like this: cellFilter: 'currency:"£" : 5' – Lyndel

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

Sexuality

Answer 3

I'm late to the party, but wanted to share the best thing that worked for me:

JS:

myGrid.columnDefs = [{
    field: "Sale",
    cellFilter: 'number:2',
    cellClass:'currency'
}]

CSS:

.currency{
    text-align:right;
}
.currency .ui-grid-cell-contents:before{
    content: '$';
    float: left;
}

Final result:

---

Details:

First I tried using cellFilter:'currency' as mentioned in a previous answer, but it didn't allow for various dollar amounts and didn't align the values to the right:

So then I added a currency class, and right-align, which fixed alignment, but not different dollar amounts.

Unfortunately, I wasn't able to find an easy fix for this (although I feel like there is one out there somewhere), so I had to change the cellFilter from currency to number:2 - this means "Always show 2 decimals".

Then I wanted a dollar sign at the left of the cell (to avoid varying dollar amounts), for that I added the following css:

.currency .ui-grid-cell-contents:before{
    content: '$';
    float: left;
}

Which left me with the final result:

Addieaddiego

Answer 4

You can use cellFilter attribute and default angularJS currency filter Live Demo - http://plnkr.co/edit/NSiCrM?p=preview

$scope.colDefs = [
    { field: 'firstName', 
      displayName: 'FN' 
    },
    { field: 'amount',
      displayName: 'AMT', 
      cellFilter: 'currency'
    }
  ];

Originality

Answer 5

Try something like this, this apply angular native filters

cellTemplate: "<div>[[ row.entity[col.field]  | currency:'Q':2 ]]"

Scaleboard

Answer 6

Well take your $ out of the regular expression for starters. Just put it after the tag. The expression, apart from the $ part, works. It looks like you are just trying to call a Javascript function within the {{ }} rather than calling something in your controller. Move the Number().toFixed().replace into a function in your controller and call that instead

     $scope.asCurrency = function(val) {
       return Number(...).toFixed()......
     };

Fugato