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

Use Legacy Grid Templates

Updated on Aug 14, 2026

Description

Use this article when maintaining an application that uses the obsolete cellRender, cell, headerCell, headerCellRender, footerCell, filterCell, or filterCellRender props. For new implementations, configure the corresponding option in the cells prop.

Solution

The obsolete cell-template props remain available for applications that use earlier versions of the Grid. These props will be removed in the next major release. The snippets in this article are for maintaining existing applications and are not runnable demos.

Use a Data Cell Template

Use cellRender to customize all data cells, or set cell on a column to customize that column.

vue

<Grid :cell-render="'legacyDataCell'">
<template #legacyDataCell="{ props }">
<td :class="props.class">
{{ props.dataItem[props.field] }}
</td>
</template>
</Grid>

vue

<Grid :columns="[{ field: 'ProductName', cell: legacyCellRender }]" />

Use a Header Template

Use headerCell or headerCellRender to customize a Grid header in an earlier Grid version.

vue

<Grid :columns="[{ field: 'ProductName', headerCell: legacyHeaderCell }]" />

Use footerCell to customize a Grid footer in an earlier Grid version.

vue

<Grid :columns="[{ field: 'UnitPrice', footerCell: legacyFooterCell }]" />

Use a Filter Template

Use filterCell on a column or filterCellRender on the Grid to customize a filter cell in an earlier Grid version. Replace these props with cells.filterCell when you update the application.

vue

<Grid
 :filterable="true"
 :columns="[{ field: 'ProductName', filterCell: 'legacyFilterCell' }]"
>
<template #legacyFilterCell="{ props }">
<input :value="props.value" @input="props.onChange" />
</template>
</Grid>