What is Aggregation
and how to use aggregation in ui-grid ?
Using aggregation we can perform certain operations like addition ,average , minimum etc on all the visible values of a particular column and show the aggregated value in the column footer.Aggregation can be
set programmatically by using the columnDef option on a column and setting the
aggregationType attribute.
$scope.gridOptions = {
columnDefs : [
{
field
: 'contribution',
name
: 'contribution($)',
…
aggregationType:
uiGridConstants.aggregationTypes.sum
…
}
]
}
Below is the list of
built in aggregation types :
- uiGridConstants.aggregationTypes.sum
- uiGridConstants.aggregationTypes.count
- uiGridConstants.aggregationTypes.avg
- uiGridConstants.aggregationTypes.min value
- uiGridConstants.aggregationTypes.max
Refer the documentation for more details on
aggregation.
The example provided
in this post below , uses the aggregation type
uiGridConstants.aggregationTypes.sum to calculate the sum of all the values in
a particular column in the grid and display the total in the grid footer as shown in the screenshot . Use the property aggregationHideLabel as mentioned in the doc to show only the aggregated value without the label . You can also customize this label i.e instead of showing total as label you can show your own customized label like 'Total Amount' preceding the aggregated value . You need to enable the grid footer to be able to see this aggregated value.
To enable the grid
footer , configure the grid options in the controller as show below :
$scope.gridOptions = {
…
showColumnFooter:
true
…
}
Here is the link to
plunker showing the demo .
No comments :
Post a Comment