Aggregates

The Kendo UI Grid wrapper for Vue enables you to display aggregate calculations at the bottom of its groups or columns.

To configure the aggregate grouping functionality in the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

To aggregate the calculations in the Kendo UI Data Grid wrapper for Vue:
1. Specify the name of the pertinent aggregate function by setting columns to aggregates.
1. Set the group and aggregate fields of the data source instance.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'"
                      :schema-model-fields="schemaModelFields"
                      :page-size='7'
                      :group="groupDefinition"
                      :aggregate="aggregateDefinition">
    </kendo-datasource>

    <kendo-grid :height="600"
                :data-source-ref="'datasource1'"
                :sortable="true"
                :pageable="true">
        <kendo-grid-column :field="'ProductName'"
                           :title="'Product Name'"
                           :aggregates="['count']"
                           :footer-template="'Total Count: #=count#'"
                           :group-footer-template="'Count: #=count#'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :aggregates="['sum']"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitsOnOrder'"
                           :title="'Units On Order'"
                           :aggregates="['average']"
                           :footer-template="'Average: #=average#'"
                           :group-footer-template="'Average: #=average#'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitsInStock'"
                           :title="'Units In Stock'"
                           :aggregates="['min', 'max', 'count']"
                           :footer-template="'Min: #= min # Max: #= max #'"
                           :group-footer-template="'Units In Stock: #= group.value # (Count: #= count#)'"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

window.JSZip = JSZip;

new Vue({
    el: '#vueapp',
    data () {
        return {
            schemaModelFields: {
                UnitsInStock: { type: "number" },
                ProductName: { type: "string" },
                UnitPrice: { type: "number" },
                UnitsOnOrder: { type: "number" }
            },
            groupDefinition: {
                field: "UnitsInStock",
                aggregates: [
                    { field: "ProductName", aggregate: "count" },
                    { field: "UnitPrice", aggregate: "sum"},
                    { field: "UnitsOnOrder", aggregate: "average" },
                    { field: "UnitsInStock", aggregate: "count" }
                ]
            },
            aggregateDefinition: [
                { field: "ProductName", aggregate: "count" },
                { field: "UnitPrice", aggregate: "sum" },
                { field: "UnitsOnOrder", aggregate: "average" },
                { field: "UnitsInStock", aggregate: "min" },
                { field: "UnitsInStock", aggregate: "max" }
            ]
        }
    },
    methods: {
        parameterMap: function(options, operation) {
            if (operation !== 'read' && options.models) {
                return { models: kendo.stringify(options.models) }
            }
        }
    }
})

In this article