Aggregates

The TreeList enables you to group its data by using column aggregates.

The TreeList displays the total calculated values in its footer item at the end of each level.

The available aggregate functions are:

  • average
  • count
  • max
  • min
  • sum
<div id="vueapp" class="vue-app">
    <kendo-treelistdatasource ref="remoteDataSource"
                              :transport-read-url="'https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/All'"
                              :transport-read-data-type="'jsonp'"
                              :schema-model="model"
                              :aggregate="aggregate">
    </kendo-treelistdatasource>

    <kendo-treelist data-source-ref="remoteDataSource" :height="'380px'">
        <kendo-treelist-column :field="'FirstName'"
                               :title="'First Name'"
                               :expandable="true"
                               :footer-template="footerTemplate">
        </kendo-treelist-column>
        <kendo-treelist-column :field="'LastName'" :title="'Last Name'"></kendo-treelist-column>
        <kendo-treelist-column :field="'Position'"></kendo-treelist-column>
        <kendo-treelist-column :field="'Extension'" :title="'Ext'"></kendo-treelist-column>
    </kendo-treelist>
</div>
Vue.use(TreeListInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp",
        data: {
            model: {
                id: "EmployeeId",
                parentId: "ReportsTo",
                fields: {
                    EmployeeId: { type: "number", nullable: false },
                    ReportsTo: { nullable: true, type: "number" }
                }
            },
            aggregate: [
                { field: "FirstName", aggregate: "count" }
            ]
        },
        methods: {
            footerTemplate (data) {
                return kendo.template("#= count # employee(s)")(data);
            }
        }
})

In this article