Footer Template

The native Vue Grid by Kendo UI enables you to customize the rendering of its footers.

Getting Started

To implement a custom footer set the footerCell option of the column to define a custom footer cell only for the particular column. The Grid renders a single footer cell under each column that has its footerCell property set. That cell will appear at the bottom of the column and will be always visible regardless of the vertical scrolling of the Grid. One can also set the footerClassName to set a custom class to the footer cell.

To render the desired footer, you can assign a Vue component, a render function, or a named slot to both properties.

Customization Approaches

To customize the footer of the Grid, apply any of the following approaches:

Using Vue Components

The native Vue Grid allows you to use both global and local component instance for customizing the footers in the Grid. The following example demonstrates how to customize the Grid header by using a global Vue component instance.

<div id="vueapp" class="vue-app">
        <grid
            :style="{height: '280px'}"
            :data-items="items"
            :columns="columns">
      </grid>
</div>
import { Grid } from '@progress/kendo-vue-grid';
const items = [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18.0000,
            },
            {
                "ProductID": 2,
                "ProductName": "Chang",
                "UnitPrice": 19.0000,
            },
            {
                "ProductID": 3,
                "ProductName": "Aniseed Syrup",
                "UnitPrice": 10.0000,
            },
            {
                "ProductID": 4,
                "ProductName": "Chef Anton's Cajun Seasoning",
                "UnitPrice": 22.0000,
            }];

const footerTemplate = Vue.component("template-component", {
    props: {
        field: String
    },
     data: function () {
        return {
            items: items
        };
    },
    computed: {
        min() {
            return this.items.reduce((acc, current) => Math.min(acc, current[this.$props.field]), Number.MAX_VALUE);
        },
        max() {
            return this.items.reduce((acc, current) => Math.max(acc, current[this.$props.field]), Number.MIN_VALUE);
        }
    },
    template: `<b>
            min: {{min}}, max: {{max}}
        </b>`
});

Vue.component('grid', Grid);
new Vue({
    el: '#vueapp',
    data: function () {
        return {
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price', footerCell: footerTemplate }
            ],
            items: items
        };
    }
});

The same could also be achieved using the following local component instance:

const footerTemplate = {
    props: {
        field: String
    },
     data: function () {
        return {
            items: items
        };
    },
    computed: {
        min() {
            return this.items.reduce((acc, current) => Math.min(acc, current[this.$props.field]), Number.MAX_VALUE);
        },
        max() {
            return this.items.reduce((acc, current) => Math.max(acc, current[this.$props.field]), Number.MIN_VALUE);
        }
    },
    template: `<b>
            min: {{min}}, max: {{max}}
        </b>`
};

Using the render Function

The following example demonstrates how to customize the Grid headers by using a render function.

<div id="vueapp" class="vue-app">
        <grid
            :style="{height: '280px'}"
            :data-items="items"
            :columns="columns"
            @custom="customHandler">
      </grid>
</div>
import { Grid } from '@progress/kendo-vue-grid';

Vue.component('grid', Grid);
new Vue({
    el: '#vueapp',
    data: function () {
        return {
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price', 
                footerCell: this.footerCellFunction }
            ],
            items: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18.0000,
            },
            {
                "ProductID": 2,
                "ProductName": "Chang",
                "UnitPrice": 19.0000,
            },
            {
                "ProductID": 3,
                "ProductName": "Aniseed Syrup",
                "UnitPrice": 10.0000,
            },
            {
                "ProductID": 4,
                "ProductName": "Chef Anton's Cajun Seasoning",
                "UnitPrice": 22.0000,
            }]
        };
    },
    methods: {
        customHandler: function(e){
            console.log('customHandler', e);
        },
        footerCellFunction: function (h, emptyElement , props, listeners ) {
            return h('span', {
                on: {
                    click: function(e){
                        listeners.custom(e);
                    }
                }
            }, ['custom ' + props.field]);
        },
    }
});

Using Named Slots

The following example demonstrates how to customize the Grid headers by using named slots.

<div id="vueapp" class="vue-app">
        <grid
            :style="{height: '280px'}"
            :data-items="items"
            :columns="columns"
            @custom="customHandler">
         <template v-slot:footerTemplate="{props, listeners}">
            <span @click="listeners.custom">{{ props.field }}</span>
        </template>
      </grid>
</div>
import { Grid } from '@progress/kendo-vue-grid';

Vue.component('grid', Grid);
new Vue({
    el: '#vueapp',
    data: function () {
        return {
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price', footerCell: 'footerTemplate'  }
            ],
            items: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18.0000,
            },
            {
                "ProductID": 2,
                "ProductName": "Chang",
                "UnitPrice": 19.0000,
            },
            {
                "ProductID": 3,
                "ProductName": "Aniseed Syrup",
                "UnitPrice": 10.0000,
            },
            {
                "ProductID": 4,
                "ProductName": "Chef Anton's Cajun Seasoning",
                "UnitPrice": 22.0000,
            }]
        };
    },
    methods: {
        customHandler: function(e){
            console.log('customHandler', e);
        }
    }
});

In this article