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

Populate Column Aggregates In Separate div Elements

Environment

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

Description

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

Solution

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

  <body>
    <div id="example">
      <div id="agg"> </div>
      <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" }
                  }
                }
              },
              pageSize: 7,
              aggregate: [{ field: "UnitsInStock", aggregate: "sum" }]
            },
            sortable: true,
            dataBound:function(e){
              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"}
            ]
          });
        });
      </script>
    </div>
    <style>
      #agg{
        margin: 25px;
      }
    </style>
  </body>
In this article