Group aggregates with filters rendering blank header rows

[trouttdev]

Example here with the Balance column: http://plnkr.co/edit/dPTSR4HewMocYDqsmpEm?p=preview

What I'm trying to accomplish is have the Balance column header be <aggregation label> <rendered content> and the cell values be the default <rendered content> with the currency filter applied.

When a filter is not applied (i.e. the currency cellFilter is removed) I get the correct header behavior, but then neither the content nor the header is rendered with the filter as I would like it to be.

I've tried a few different things with the customTreeAggregationFinalizerFn function, but nothing seems to quite get the effect I'm looking for. It seems to be either I can get the header rows rendered correctly or I can get the data rows rendered correctly, but not both at once.

Is it possible to do this?

[PaulL1]

To do this you need to write code such that the currency filter is only applied to the detail rows.

Options to do this would include:

1. Writing a custom filter (rather than the built-in currency filter) that first checks the format of the text before applying the currency formatting.
2. Writing a custom cell template that only applies the currency filter if the row isn't a header

[trouttdev]

Paul,

I actually was attempting to do option 2, but was unable to figure out the right row or aggregation property that would let me accomplish that. Could you point me in the right direction on that?

Thanks!

[gpkarma]

If anyone finds out how to do option 2 please let me know, looking to do the same thing. Thanks!

[trouttdev]

@gpkarma I ended up doing this (super hacky) method:

Set the cellTemplate to:

<div ng-if="!row.groupHeader" class="ui-grid-cell-contents" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div>
<div ng-if="row.groupHeader" class="ui-grid-cell-contents" title="TOOLTIP">{{COL_FIELD}}</div>

Then you can set the customTreeAggregationFinalizerFn to:

function( aggregation ) { aggregation.rendered = aggregation.label + $filter('currency')(aggregation.value); }

This one obviously only works for currency columns, but you can add to it in order to filter based on the columns filter.

It's not pretty, but it works.

[gpkarma]

@mltroutt where do I want to reference the customTreeAggregationFinalizerFn from in my column def? I have not used it before. Thanks.

[gpkarma]

Never mind, I figured it out. You meant the columnTreeAggregationFinalizerFn attribute on the column def.

[tarzasai]

It seems to be either I can get the header rows rendered correctly or I can get the data rows rendered correctly, but not both at once.

Yes, looks like COL_FIELD will assume a different value (maybe the counter?) on the header rows, and that's why I'm using this as columnTreeAggregationFinalizerFn (for all my columns):

function aggregationFinalizerFn(aggregation) {
    if (aggregation.type === 'sum')
        aggregation.rendered = aggregation.value;
    else if (aggregation.type === 'count')
        aggregation.rendered = aggregation.groupVal;
}

and all my templates are like this:

<div class="ui-grid-cell-contents col-align-right" title="TOOLTIP">
    <div ng-if="!row.groupHeader || !(col.grouping && col.grouping.groupPriority > -1)">{{ COL_FIELD | fmtCurrency }}</div>
    <div ng-if="row.groupHeader && col.grouping && col.grouping.groupPriority > -1 && col.grouping.groupPriority === row.treeLevel">
        <span class="grid-group-count">({{ row.treeNode.children.length }})</span>{{ COL_FIELD | fmtCurrency }}</div>
</div>

this way all non-string values are correctly formatted in both header and normal rows, but TBH now I have a possibly related sort issue on the second level group: it get sorted by count (number of rows in the group) instead of value. It's quite strange since if I use the same column as first-level group it get correctly sorted by value.