Format footer values in ui-grid

Question

How do I format the aggregate value for a column in ui-grid?

With my numbers I get something horrible like

total: 6370.046074130321

when I would like

total: $6370.05

I tried both:

footerCellTemplate: '<div class="ui-grid-cell-contents" >{{COL_FIELD | currency}}</div>',

and

footerCellTemplate: '<div class="ui-grid-cell-contents" >{{grid.getCellValue(row, col) | currency}}</div>',

but none of them work.

score 17 · Accepted Answer · answered May 19 '15 at 17:17

The templates you had tried will work for the normal cell values but your are trying to get the template work on a aggregate value.

To get the aggregate value for the column inside a template you can use {{col.getAggregationValue()}} and add your format options.

Since you want to have two decimals this would be more like {{col.getAggregationValue() | number:2 }}

Also remember the template will be different if you have column filters enabled on the grid.

KARTHIKEYAN.A · Answer 2 · 2016-05-20T05:39:32.357

6

if you need the after decimal point to show two values then use custom template functionality in grid options

       {
            field: 'ORGINAL_FUNC_AMOUNT',
            displayName: 'CR A/C',
            aggregationType: uiGridConstants.aggregationTypes.sum,
            footerCellTemplate: '<div class="ui-grid-cell-contents" >Total: {{col.getAggregationValue() | number:2 }}</div>'
        }

edited May 20 '16 at 05:39

answered May 20 '16 at 04:47

KARTHIKEYAN.A

18,210
6
124
133

score 1 · Answer 3 · answered Nov 20 '15 at 19:58

$templateCache.put('ui-grid/uiGridFooterCell',
"<div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\"><div>{{ col.getAggregationText() + ( col.getAggregationValue() CUSTOM_FILTERS ) }}</div></div>"  );

CUSTOM_FILTERS = footerCellFilter property grid.colDef[0].footerCellFilter = 'number:2'

score 0 · Answer 4 · answered May 18 '15 at 20:34

0

You can use the number filter to choose the amount of decimal you need.

{{'$' + valueToFormat | number:2}}

Otherwise, you can use a custom filter function to filter the text/value yourself.

In your module you add:

.filter('customFilterFunction', function() {
return function(input) {
    var out = "";
    out = '$' + parseFloat(input).toFixed(2);
    return out;
  };
})

In your HTML you add:

{{valueToFormat | customFilterFunction}}

answered May 18 '15 at 20:34

snaplemouton

1,459
14
28

it's that `valueToFormat` that I need. As you can see from my original question I have already done that ( | currency) but I am using `COL_FIELD` which doesn't appear to be correct. – DeclanMcD May 19 '15 at 10:40

Didier68 · Answer 5 · 2020-12-21T22:52:14.960

I use the ui-grid - v4.9.1 (2020-10-26), and I have the same formatting problem... col.getAggregationValue() returns the rigth aggregate value, but col.getAggregationText() doesn't return the label...

After some debugging sessions, i retrieve the label in col.treeAggregation.label, and also my template is:

colDef.footerCellTemplate = '<div class="ui-grid-cell-contents cellAlignRight" >{{col.treeAggregation.label}} {{  ( col.getAggregationValue()  | number: 2) }}</div>'

Format footer values in ui-grid

5 Answers5