Accessing External Variables in Kendo UI Grid Footer Template

Environment

Product	Version
Kendo UI for jQuery Grid	2024.1.319

Description

I am employing the Kendo UI Grid for jQuery to display data and need to utilize a variable from an external method in the Grid footer. The challenge involves integrating a variable returned from a method outside the grid into the footerTemplate for dynamic calculations and display.

This KB article also answers the following questions:

• How can I use an external variable in a Kendo Grid footerTemplate?
• What is the method to include dynamic content in the footer of a Kendo UI Grid?
• Can I access a variable from outside the Kendo Grid in its footerTemplate?

Solution

To use a variable from an external method in the footerTemplate of a Kendo UI Grid, you need to ensure that the variable is accessible in the scope where the Grid is defined. You can then reference this variable directly within the footerTemplate.

1. Ensure global or higher scope availability: The variable you wish to use must be accessible in the scope where the Grid is initialized. If it is returned from an external method, store it in a variable that's accessible in the Grid's scope.

2. Reference the variable in footerTemplate: Directly use the variable within the footerTemplate definition. Since the footerTemplate is a function, it can access any variables in its closure.

Below is an example:

    <div id="grid"></div>
    <script>      
      let additional = 'Some additional text'

      function customCalculation(dataItem){        
        return dataItem.min * 5
      }

      $("#grid").kendoGrid({
        columns: [
          { field: "name" },
          { field: "age",
           footerTemplate: function({age}) {            
             return 'Min: ' + age.min + ' Max: ' + age.max + '---> ' + additional + ' -- custom: ' + customCalculation(age)
           },
          }
        ],
        dataSource: {
          data: [
            { name: "Jane Doe", age: 30 },
            { name: "John Doe", age: 33 }
          ],
          aggregate: [
            { field: "age", aggregate: "min" },
            { field: "age", aggregate: "max" }
          ]
        }
      });
    </script>

Notes

• Ensure the external method and the variable storing its result are defined before initializing the Kendo UI Grid to avoid reference errors.

See Also

• Official Documentation for Kendo UI Grid
• Kendo UI Grid footerTemplate Documentation