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.

Harty

Answer 1

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.

Thirtyone

Answer 2

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

Jabberwocky

Answer 3

$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'

Pearlinepearlman

Answer 4

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}}

Kaleb

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. – Harty

Answer 5

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>'

Clicker