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.

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.

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

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'