Display Same Aggregate in Group Header Regardless of Column Used to Group By

Environment

Product Grid for ProgressĀ® Kendo UIĀ®
Product Version 2018.2.516

Description

How can I display the sum of a specific column, let's say Units In Stock, in the header of the groups, even when I group by a different column?

Solution

In order to access the aggregate of a specific column in a Kendo UI Template, we use the following:

aggregates.fieldName1.sum

The following sample demonstrates the approach described above by displaying the UnitsInStock sum aggregate in the groupHeaderTemplate:

<div id="grid"></div>
<script>
  $(document).ready(function() {
    $("#grid").kendoGrid({
      dataSource: {
        type: "odata",
        transport: {
          read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
        },
        schema:{
          model: {
            fields: {
              UnitsInStock: { type: "number" },
              ProductName: { type: "string" },
              UnitPrice: { type: "number" },
              UnitsOnOrder: { type: "number" },
              UnitsInStock: { type: "number" },
              Discontinued: { type: "boolean"}
            }
          }
        },
        pageSize: 7,
        group: {
          field: "UnitsInStock", aggregates: { field: "UnitsInStock", aggregate: "sum" }

        },

        aggregate: { field: "UnitsInStock", aggregate: "sum" }
      },
      sortable: true,
      scrollable: false,
      groupable: true,
      pageable: true,
      columns: [
        { field: "ProductName", title: "Product Name", groupHeaderTemplate: "Product Name: #=value# - (Units in Stock: #=aggregates.UnitsInStock.sum#)" },
        { field: "UnitPrice", title: "Unit Price", groupHeaderTemplate: "Unit Price: #=value# - (Units in Stock: #=aggregates.UnitsInStock.sum#)" },
        { field: "UnitsOnOrder", title: "Units On Order", groupHeaderTemplate: "Units On Order: #=value# - (Units in Stock: #=aggregates.UnitsInStock.sum#)" },
        { field: "UnitsInStock", title: "Units In Stock", aggregates: ["sum"]},
        { field: "Discontinued", title: "Discontinued", groupHeaderTemplate: "Discontinued: #=value# - (Units in Stock: #=aggregates.UnitsInStock.sum#)"}
      ]
    });
  });
</script>

See Also

In this article
Not finding the help you need? Improve this article