Native Components / Grid / Custom Templates

Cell Template

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

Getting Started

To implement a custom cell:

  1. Use the cellRender prop that will customize all cells.
  2. Set thecell option of the column to define a custom cell only for the particular column.

If you use both cellRender and cell, the Grid will render the specified custom column cell. To render the desired cell, you can assign a Vue component, a render function, or a named slot to both properties.

Customization Approaches

To customize the cells in 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 the Grid cells. The following example demonstrates how to customize the Grid cells by using a global Vue component instance.

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

function getNestedValue(fieldName, dataItem) {
    const path = fieldName.split('.');
    let data = dataItem;
    path.forEach((p) => {
        data = data ? data[p] : undefined;
    });

    return data;
}

const componentInstance = Vue.component("template-component", {
    props: {
        field: String,
        dataItem: Object,
        format: String,
        className: String,
        columnIndex: Number,
        columnsCount: Number,
        rowType: String,
        level: Number,
        expanded: Boolean,
        editor: String,
    },
    template: ` <td :class="className" @click="clickHandler"><b>{{ getNestedValue(field, dataItem)}}</b></td>`,
    methods: {
        clickHandler: function(e){
            this.$emit('custom', e);
        },
        getNestedValue: getNestedValue
    }
});

Vue.component('grid', Grid);
new Vue({
    el: '#vueapp',
    data: function () {
        return {
            cellTemplate: componentInstance,
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price' }
            ],
            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);
        },
        getNestedValue: getNestedValue
    }
});

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

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 :class="className" @click="clickHandler"><b>{{ getNestedValue(field, dataItem)}}</b></td>`,
    methods: {
        clickHandler: function(e){
            this.$emit('custom', e);
        },
        getNestedValue: getNestedValue
    }
};

Using the render Function

The following example demonstrates how to customize the Grid cells 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', cell: this.cellFunction }
            ],
            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);
        },
        cellFunction: function (h, tdElement , props, listeners ) {
            return h('td', {
                on: {
                    click: function(e){
                        listeners.custom(e);
                    }
                }
            }, ['custom ' + props.dataItem.UnitPrice]);
        }
    }
});

Using Named Slots

The following example demonstrates how to customize the Grid cells by using named slots. For the complete example, refer to the demo on StackBlitz.

<div id="vueapp" class="vue-app">
        <grid
            :style="{height: '280px'}"
            :data-items="items"
            :cell-render="'myTemplate'"
            :columns="columns"
            @custom="customHandler">
         <template v-slot:myTemplate="{props, listeners}">
            <td  :class="props.className"><b>{{ getNestedValue(props.field, props.dataItem) }}</b></td>
        </template>
      </grid>
</div>
import { Grid } from '@progress/kendo-vue-grid';

function getNestedValue(fieldName, dataItem) {
    const path = fieldName.split('.');
    let data = dataItem;
    path.forEach((p) => {
        data = data ? data[p] : undefined;
    });

    return data;
}

Vue.component('grid', Grid);
new Vue({
    el: '#vueapp',
    data: function () {
        return {
            columns: [
                { field: 'ProductID'},
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price' }
            ],
            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);
        },
        getNestedValue: getNestedValue
    }
});

In this article