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

Add a Native Grid with a Custom Template, Row Details, and Grouping


Product Version2.4.0
ProductProgress® Kendo UI for Vue Native


This Knowledge base article demonstrates how the Grouping, row Details and custom template functionality of the Native Grid can be combined.


The Details template of the Grid can be defined with the detail property. The template passed to this property in the below example is defined as follows:

<template v-slot:cellDetailTemplate="{props}">
			<p><strong>Descriptions:</strong> {{props.dataItem.ProductName}}</p>

The custom template in which the Grouping functionality is implemented is passed to the Grid through its cellRender property. The slot template passed to the cellRender is the following one:

<template v-slot:myTemplate="{props}">
	<custom :field="props.field"
			@click="clickHandler(props.dataItem)" />

Runnable example

View Source
Change Theme:

In this article

Not finding the help you need?