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

Updated on Sep 9, 2026

Environment

Product Version	2.4.0
Product	Progress® Kendo UI for Vue

Description

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

Solution

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:

js

<template #cellDetailTemplate="{props}">
		<section>
			<p><strong>Descriptions:</strong> {{props.dataItem.ProductName}}</p>
		</section>
</template>

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:

js

<template #myTemplate="{props}">
	<custom :field="props.field"
			:expanded="props.expanded"
			:row-type="props.rowType"
			:level="props.level"
			:column-index="props.columnIndex"
			:columns-count="props.columnsCount"
			:data-item="props.dataItem"
			:class-name="props.className"
			@click="clickHandler(props.dataItem)" />
</template>

Runnable example

Example

View Source

Loading ...