Display HTML in the Native Grid

Environment

Description

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

Solution

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

Copy Code<template v-slot: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:

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