selectable.cellAggregates Boolean|Array

If set to true all aggregates will be calculated and made available to the Status Bar. The cellAggregates property also accepts an array in case only some of the aggregates should be calculated.

The available aggregates are:

  • count - the count of all selected cells(excluding command/selectable/draggable column) but including template columns without fields.
  • max - for numeric cells - the biggest numeric value across all of the selected cells/rows.
  • min - for numeric cells - the smallest numeric value across all of the selected cells/rows.
  • sum - for numeric cells - the sum of all numeric values from the selected cells/rows.
  • average - for numeric cells - the average of all numeric values from the selected cells/rows.
  • earliest - for date cells.
  • latest - for date cells.
  • isTrue - for boolean cells - the count of all selected cells with value true.
  • isFalse - for boolean cells - the count of all selected cells with value false.

Example - enable cell aggregates

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
      data: [
          { id: 1, name: "Jane Doe", age: 30 },
          { id: 2, name: "John Doe", age: 33 }
      ],
      schema: {
          model: {
              id: "id"
          }
      }
  },
  selectable: {
    mode: "multiple, row",
    cellAggregates: true
  },
  statusBarTemplate: ({aggregates}) => `Count: ${aggregates.count}, Max: ${aggregates.max}`
});
</script>

Example - customize the calculated cell aggregates

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
      data: [
          { id: 1, name: "Jane Doe", age: 30 },
          { id: 2, name: "John Doe", age: 33 }
      ],
      schema: {
          model: {
              id: "id"
          }
      }
  },
  selectable: {
    mode: "multiple, row",
    cellAggregates: ["sum", "count", "earliest", "isTrue", "max"]
  },
  statusBarTemplate: ({aggregates}) => `Count: ${aggregates.count}, Max: ${aggregates.max}`
});
</script>
In this article