New to Kendo UI for Angular? Start a free 30-day trial


The Grid enables you to visualize the aggregates for the grouped data in the respective column group footer or header.

To group the table data of the Kendo UI Grid for Angular, use its group and groupable options. For additional information, refer to the article on the process helpers for bulk data operations.

The aggregate values are available in the context of the following templates:

  • Group header template—Rendered in the first cell of the group row. For each group row only one group header is available, that is, the group header that is declared in the currently grouped column.
  • Group header column template—Rendered in the corresponding cell in the group header. If no group header template is available for the column, the group header column template is used for the group header.
  • Group footer template—Rendered in the corresponding cell in the group footer.

The following example demonstrates how to display the aggregate values in the templates. Hover the header cells to see the name of the template.

View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?