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: Sum Average Min Max Count TrueCount FalseCount Custom - 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. The template expression should be provided inside the ${...} the interpolation syntax. Injecting Module: Grid features are segregated into individual modules by feature. To use the aggregate feature, we need to inject the Aggregate module using the Grid.Inject(Aggregate) section. More information on the stacked header configuration can be found in this documentation section.