AngularJS UI Grid, How to filter currency with $0.00

Question

I am working with AngularJS UI-Grid and am trying to filter pricing. The filtering works fine for anything with a number other than 0 behind the decimal.

$scope.GridOptions = {
            enableFiltering: true,
            rowEditWaitInterval: -1,
            multiSelect: true,
            enableColumnMenus: false,
            columnDefs: [
                { name: 'Name', field: 'Item', width: '15%' },
                { name: 'Price', field: 'Price', type: 'number', cellFilter: 'currency', width: '6%' },
                { name: 'Current Price', field: 'CurrentPrice', type: 'number', cellFilter: 'number: 2', width: '12%' }
            ]

2 after decimal, 0 after decimal

angular js has a built in currency filter. in the template you can do something like {{item_price | currency}}, inside an ng-repeat if you need to (which it looks like you do) — Peege151, Apr 10 '16 at 20:41
It's reading it as currency, but it's still filtering out anything that would read '.0'. — Thecor, Apr 11 '16 at 15:44

score 1 · Accepted Answer · answered Apr 10 '16 at 20:45

1

Change the field type to 'numberstr' per the documentation @ http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef for the cell 'type' attribute

answered Apr 10 '16 at 20:45

jas-

1,801
1
18
30

It's still losing anything that has a '.0' in the price (i.e. 0.00 or 10.05). The moment you key in the decimal, it filters out anything that has a 0 behind the decimal. – Thecor Apr 11 '16 at 15:42
-_- I have found the reason for the problem. The CSV I am pulling from truncates the trailing 0's (so anything coming in as 0.00 or 10.00 will be just 0 or 10). I am using AngularJS to append the .00 at the end but when you filter, UI-Grid ignores any graphical modifications it has done to the object. Thanks for the help. – Thecor Apr 11 '16 at 15:54
Thus js interpreting it as a string. You can always append the decimal with the parsefloat() function too – jas- Apr 12 '16 at 02:26

score 0 · Answer 2 · answered Aug 09 '17 at 23:11

I had to jump through way too many hoops to get a nice-looking currency column, but hopefully this will be accounted for in the future. This worked best for me:

JS - add cellFilter:number:2 and cellClass:'currency' to the column definition:

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

CSS - add these two style definitions to your css:

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

Final result:

You can read more about it in my original answer here.

AngularJS UI Grid, How to filter currency with $0.00

2 Answers2