New to Kendo UI for Vue? Start a free 30-day trial

Aggregates

The native Vue Grid by Kendo UI enables you to visualize the aggregates for the grouped data in the respective column group footer of the component.

To group the table data of the Grid, use its group and groupable options.

To integrate the available aggregates in the Grid:

  1. Select the desired GridGroupableSettings so that the Grid renders footers.
  2. In the cellRender method of the Grid, specify the way for displaying the aggregates.
Example
View Source
Change Theme:

In the above example the cell render could also be defined as a local component instance in the following way:

const componentInstance = {
    props: {
        field: String,
        dataItem: Object,
        format: String,
        className: String,
        columnIndex: Number,
        columnsCount: Number,
        rowType: String,
        level: Number,
        expanded: Boolean,
        editor: String
    },
    template: `<td v-if="rowType==='groupFooter'">
                    {{computedAggregates}}
                </td>
                 <td v-else :class="className">
                 {{ getNestedValue(field, dataItem)}}
                </td>`,
  computed: {
    computedAggregates: function() {
        let renderedString;
        if (this.field === 'UnitPrice') {
            renderedString = ' Average: ' + this.dataItem.aggregates.UnitPrice.average;
        } else if (this.field === 'UnitsInStock') {
            renderedString = ' Sum: ' + this.dataItem.aggregates.UnitsInStock.sum;
        }

        return renderedString;
    }
  },
    methods: {
        onClick(e) {
            this.$emit('change', e, this.dataItem, this.expanded);
        },
        getNestedValue: getNestedValue
    }
};

In this article

Not finding the help you need?