How To Display Aggregates in the Footer Based on Selection in ContextMenu in the Grid

Environment

Product

Progress® Kendo UI® Grid for jQuery

Description

I want to add custom commands in the Grid context menu. Based on the selection in the context menu I would like to display aggregates in the Grid footer.

Solution

1. To achieve the desired behavior you can add a footerTemplates in the columns with an empty span element with custom class.
2. You can also add custom commands to the contextMenu.body.
3. When an item in the ContextMenu is selected you can find the current column index and the field of the selected column.
4. Based on the selected custom command you can find the needed aggregate and construct a string containing the needed information. You can use that string to change the content of the footer template of the respective column.

    <div id="grid"></div>

    <script>
      $(document).ready(function () {

        var dataSource = new kendo.data.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" }
          ]
        });

        $("#grid").kendoGrid({
          dataSource: dataSource,
          contextMenu: {
            body: [
              { name: "MyCustomPrevPage", text: "Average", icon: "formula-fx", command: "CustomAvgCommand" },
              { name: "MyCustomNextPage", text: "Total", icon: "sum", command: "CustomTotalCommand" }                        
            ]
          },
          editable: false,
          pageable: true,
          columns: [
            {
              field:"OrderID",               
              footerTemplate: "<span class='ft'></span>",
            },
            {
              field: "ShipCity",
              title: "Ship City",
              footerTemplate: "<span class='ft'></span>",
            },
            {
              field: "Freight",
              title: "Freight",
              footerTemplate: "<span class='ft'></span>",
            }
          ]          
        });


        kendo.ui.grid.commands["CustomTotalCommand"] = kendo.ui.grid.GridCommand.extend({
          exec: function () {
            let that = this,
                grid = that.grid,
                    target = this.options.target,
                    colindex = $(target).index(),
                    currentField = $("#grid").data('kendoGrid').options.columns[colindex].field,
                aggregates = $("#grid").data('kendoGrid').dataSource.aggregates(),
                aggregatesCurrentField = aggregates[currentField],
                currentAggr = '',
                content = '';

            if(aggregatesCurrentField){
               currentAggr = aggregatesCurrentField.sum,
              content = "Total : " + currentAggr;
            }else{
              content = 'No such aggr'
            }            

            $('.ft:eq('+ colindex +')').text(content)         
          }
        });

        kendo.ui.grid.commands["CustomAvgCommand"] = kendo.ui.grid.GridCommand.extend({
          exec: function () {
            let that = this,
                grid = that.grid,
                    target = this.options.target,
                    colindex = $(target).index(),
                    currentField = $("#grid").data('kendoGrid').options.columns[colindex].field,
                aggregates = $("#grid").data('kendoGrid').dataSource.aggregates(),
                aggregatesCurrentField = aggregates[currentField],
                currentAggr = '',
                content = '';

            if(aggregatesCurrentField != undefined){
              currentAggr = aggregatesCurrentField.average
              content = "Average : " + currentAggr;
            }else{
              content = 'No such aggr'
            }

            $('.ft:eq('+ colindex +')').text(content)    
          }
        });

      });
    </script>

See Also

• Grid API Reference
• Grid Context Menu
• Grid Context Menu Demo