This sample demonstrates the aggregate functionality of the Grid. In this sample, the “Energy Produced” column will displays its sum aggregate value in the group footer and the min and max aggregate values in group caption.
The Grid supports displaying aggregates in its footer, group footer and group caption.
The aggregate configurations can be provided by the
aggregates
property.
Built-in aggregates:
SumAverageMinMaxCountTrueCountFalseCountCustom - Requires the
customAggregate
property to perform the aggregation.
The custom aggregate value can be accessed inside template using the key custom.
In this demo, the
groupFooterTemplate property is used to display the group footer aggregation for the Energy Produced column and the
groupCaptionTemplate property is used to display its group caption aggregation.
To enable group footer aggregation for the Energy Produced column, use the Sum aggregate type by setting the
type and set the
field property to EnergyProduced which will be used to perform the aggregation.
The aggregate value is accessed inside the
groupFooterTemplate using its
type name (Sum).
To enable group caption aggregation for the Energy Produced column, the max and minaggregate types are used by setting the
type and the
field property is set to EnergyProduced, which will be used to perform the aggregation.
The aggregate value is accessed inside the
groupCaptionTemplate using its
type name (Max and Min).
In this sample, we use the
groupCaptionTemplate to show multiple aggregate values.
Injecting Module:
Grid component features are segregated into individual feature-wise modules. To use aggregate feature, we need to inject
Aggregate into the provide section. Since grouping feature is required
to show group aggreations, we also need to inject Group module.