Edit this page

Populate Column Aggregate In a Separate DIV Element


Product Version 2017.3 1026
Product Grid for ProgressĀ® Kendo UIĀ®


My requirement is to populate a column aggregate/sum into a separate div element outside of the Grid.


The aggregates for a column can be retrieved using the aggregates method of the dataSource:

The following example demonstrates how to show the value inside a DIV:

    <div id="example">
      <div id="agg"> </div>
      <div id="grid"></div>
        $(document).ready(function() {
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                model: {
                  fields: {
                    UnitsInStock: { type: "number" },
                    ProductName: { type: "string" },
                    UnitPrice: { type: "number" },
                    UnitsOnOrder: { type: "number" },
                    UnitsInStock: { type: "number" }
              pageSize: 7,
              aggregate: [{ field: "UnitsInStock", aggregate: "sum" }]
            sortable: true,
              var aggSum = e.sender.dataSource.aggregates().UnitsInStock.sum
              $('#agg').html("The sum of the Units In Stock column is: "+ aggSum)
            scrollable: false,
            pageable: true,
            columns: [
              { field: "ProductName", title: "Product Name"},
              { field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },
              { field: "UnitsOnOrder", title: "Units On Order" },
              { field: "UnitsInStock", title: "Units In Stock"}
        margin: 25px;
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article