kendo-vue/knowledge-base/render-html-in-native-grid.md

title	description	type	page_title	slug	tags	res_type	category
Display HTML in the Native Grid	An example of how to render HTML in the Kendo UI for Vue Native Grid.	how-to	Render HTML in the Grid - Kendo UI for Vue Native Grid	render-html-in-native-grid	grid, render, html, style	kb	knowledge-base

Environment

Product Version	2.4.2
Product	Progress® Kendo UI for Vue Native

Description

How can I render HTML inside the Kendo UI for Vue Native 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:

<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:

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

{% meta id:index height:360 %} {% embed_file render-html-in-native-grid/main.vue preview %} {% embed_file render-html-in-native-grid/main.js preview %} {% endmeta %}