Display HTML in the Grid

Updated on Sep 9, 2026

Environment

Product Version	2.4.2
Product	Progress® Kendo UI for Vue

Description

How can I render HTML inside the Kendo UI for Vue Grid?

Solution

Define a custom template for the Grid column that must display rendered HTML. Pass the custom template to the selected column using the cell cell column property. Define the custom template as follows:

js

<template #myTemplate="{props, listeners}">
    <td :class="props.className" v-html="getNestedValue(props.field, props.dataItem)"></td>
</template>

Add apply the template to the selected column with the following definition:

js

{ field: 'ProductName', title: 'Product Name', cell: 'myTemplate' }

Example

View Source

Loading ...