New to Kendo UI for jQuery? Download free 30-day trial

Populate Column Aggregates In Separate div Elements


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


How can I populate a column aggregate (sum) into a separate div element outside the Grid?


To retrieve the aggregate of a column, use the aggregates method of the dataSource.

    <div id="example">
      <div id="agg"> </div>
      <div id="grid"></div>
        $(document).ready(function() {
            dataSource: {
              type: "odata",
              transport: {
                read: ""
                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;
In this article
Not finding the help you need? Improve this article