Display Aggregation from ContextMenu in Grid

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product	Progress® Kendo UI® ContextMenu for jQuery

Description

How can I display a specific aggregation by selecting it from a ContextMenu in the footer of the Grid?

Solution

• Add an empty span with custom class as a footerTemplate in each column of the Grid.

columns: [
   {
     field: ...,
     title: ...,
     footerTemplate: "<span class='ft'></span>",
   },
]

• In the select event of the ContextMenu component find the current column index, the field of the selected column and the Grid aggregates.

 select: function(e){
    var colindex = $(e.target).index();
    var currentField = $("#grid").data('kendoGrid').options.columns[colindex].field;
    var selected = e.item.innerText;
    var aggregates = $("#grid").data('kendoGrid').dataSource.aggregates();
    var aggregatesCurrentField = aggregates[currentField];
    var currentAggr = '';

    ...
 }

• Based on the selected value in the ContextMenu, find the needed aggregate.

    if (selected == 'Total' && aggregatesCurrentField){
      currentAggr = aggregatesCurrentField.sum;
    } else if (selected == 'Average' && aggregatesCurrentField){
      currentAggr = aggregatesCurrentField.average;
    } else {
      currentAggr = 'No such aggr';
    }

• Construct a string, containing the needed information, and use it to change the content of the footerTemplate of the respective column.

    var content = selected + ": " + currentAggr;
    $('.ft:eq('+ colindex +')').text(content);

The following example demonstrates the full implementation of the suggested approach:

<div id="example">
      <ul id="context-menu">
        <li>Total
        </li>
        <li>Average
        </li>
      </ul>
      <div id="grid"></div>
      <script>
        $(document).ready(function() {
          $("#grid").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
              },
              schema: {
                model: {
                  fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    ShipName: { type: "string" },
                    OrderDate: { type: "date" },
                    ShipCity: { type: "string" }
                  }
                }
              },
              pageSize: 10,
              aggregate: [
                { field: "Freight", aggregate: "sum" },
                { field: "Freight", aggregate: "average" },
                { field: "OrderID", aggregate: "sum" },
                { field: "OrderID", aggregate: "average" }
              ]
            },
            sortable: true,
            filterable: true,
            pageable: true,
            sort: function(e) {
              let originalEvent = event;

              if($(originalEvent.target).is("#menuTarget")) {
                e.preventDefault();
              }
            },
            columns: [
              {
                field:"OrderID",
                headerTemplate: "<span id='menuTarget' class='k-icon k-i-more-vertical'></span><a class='k-link' href='#'>Amount</a>",
                footerTemplate: "<span class='ft'></span>",
              },
              {
                field: "ShipCity",
                title: "Ship City",
                footerTemplate: "<span class='ft'></span>",
              },
              {
                field: "Freight",
                title: "Freight",
                footerTemplate: "<span class='ft'></span>",
              }
            ]
          });

          $("#context-menu").kendoContextMenu({
            target: "#grid",
            filter: "td",
            alignToAnchor: true,
            copyAnchorStyles: false,
            showOn: "click",
            select: function(e){

               var colindex = $(e.target).index()
               var currentField = $("#grid").data('kendoGrid').options.columns[colindex].field
               var selected = e.item.innerText
               var aggregates = $("#grid").data('kendoGrid').dataSource.aggregates()
               var aggregatesCurrentField = aggregates[currentField];
                console.log(aggregatesCurrentField);
               var currentAggr = ''

               if(selected == 'Total' && aggregatesCurrentField){
                 currentAggr = aggregatesCurrentField.sum
               } else if(selected == 'Average' && aggregatesCurrentField){
                 currentAggr = aggregatesCurrentField.average
               } else {
                 currentAggr = 'No such aggr'
               }

               var content = selected + ": " + currentAggr;
              $('.ft:eq('+ colindex +')').text(content)             

            }
          });
        });
      </script>
    </div>

See Also

• JavaScript API Reference of the Grid
• JavaScript API Reference of the ContextMenu