Angular Data GridAggregation - FilteringEnterprise

This section describes the different ways that aggregated values can be filtered in the grid.

Default Filtering with Aggregated Values

By default, when using Filters and Aggregations the filtering will only apply to the cell values in leaf-level rows, and not to any of the aggregated values in the group rows. Also, when a column filter is applied, the aggregated values shown in the group rows will be updated based on the filtered rows only.

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */>
</ag-grid-angular>

this.columnDefs = [
    { field: 'country', rowGroup: true },
    { field: 'athlete', rowGroup: true },
    { field: 'year' },
    { field: 'total', aggFunc: 'sum', filter: 'agNumberColumnFilter' },
];

In the snippet above, rows are grouped by country and athlete. The Built-In Function sum is used to aggregate the total values.

The example below demonstrates how aggregated values update to reflect the applied filters.

• Apply a filter for the total column with the value 4.
• Note how the value in the total column for the United States is now 12 instead of 38, reflecting the now filtered leaf rows.

Suppressing Aggregation Updates When Filtering

To prevent the Default Behaviour of Aggregated values being calculated from the Filtered results only, and instead calculate them from the pre-filtered data, enable the suppressAggFilteredOnly option.

<ag-grid-angular
    [suppressAggFilteredOnly]="suppressAggFilteredOnly"
    /* other grid options ... */>
</ag-grid-angular>

this.suppressAggFilteredOnly = true;

The example below demonstrates this behaviour - when a filter is applied, group row aggregated values remain unchanged and show their original values representing the original unfiltered data.

• Apply a filter for the year column with the value 2008.
• Note how the values in the total column do not update to reflect the filtered data.

Filtering Group Aggregations

The Default Behaviour of Filtering is to only filter the leaf-level rows and to ignore cell values in Group Rows. This prevents filtering group rows based on Aggregation values.

Enabling Group Aggregation Filtering

By default, column filters are not applied to cell values shown in Group Rows as they do not usually have any data of their own. However when using Aggregation, group rows will show aggregated values computed based on their child rows.

You can filter the grid based on the group row aggregated values by setting the groupAggFiltering grid option as shown below:

<ag-grid-angular
    [groupAggFiltering]="groupAggFiltering"
    /* other grid options ... */>
</ag-grid-angular>

this.groupAggFiltering = true;

With this option set, when an aggregated value in a group row matches the filter, the matching group row will be shown as well as:

• all the parent group rows of the matching group row up to the root level
• all the child and leaf-level rows of the matching group row

The example below demonstrates the behaviour when filtering aggregated values. Please go through the list of filtering scenarios below to better understand this functionality.

Note the following:

1. Using the total column apply a filter for the value 6. Note in the filtered grid the leaf row Natalie Coughlin is displayed with all of its parent group rows.
2. Using the total column, now apply a filter for the value 38. Note that as the aggregated value of the United States group row matches the filter, all of its child and leaf-level rows as shown. Specifically, note that both United States-Swimming and United States-Gymnastics row groups are displayed under the United States row group.
3. Using the total column, now apply a filter for the value 34. Note that as the aggregated value of the United States-Swimming group row matches the filter, the United States-Swimming group row and all its leaf-level rows are shown. However, unlike the previous filtering scenario, the United States-Gymnastics group row is not displayed any more, because the filter match is the United States-Swimming group row only.

Custom Group Aggregation Filtering

As seen above, the default behaviour of Filtering Group Aggregations is to apply the filter to all row group levels. If you’d like to change this behaviour and apply the filter only to specific group row levels, or specific grouped columns (regardless of the level at which these group columns appear), a callback can be provided to the groupAggFiltering property.

See an example implementation of this callback below.

<ag-grid-angular
    [groupAggFiltering]="groupAggFiltering"
    /* other grid options ... */>
</ag-grid-angular>

this.groupAggFiltering = (params) => !!params.node.group;

The snippet above demonstrates how the callback can be used to selectively apply filters. In this example, the filter condition is applied to group level rows only.

The example below demonstrates this specific scenario.

• Using the total column apply a filter for the value 6.
• Note that no rows are displayed despite some leaf rows containing the value 6 - the row for Natalie Coughlin, for example. This is because the filter is applied to group rows only and there are no group rows with value 6.
• Using the total column now apply a filter for the value 38.
• Note that the group row United States matches this filter due to its aggregated value, and also displays all of its child and leaf rows.

The properties of the Row Node provided by the groupAggFiltering callback parameters can be used to further customise row group filtering behaviour.

Next Up

Continue to the next section to learn about Other Aggregation Topics.