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

## Environment

<table>
    <tbody>
	    <tr>
	    	<td>Product Version</td>
	    	<td>2.4.0</td>
	    </tr>
	    <tr>
	    	<td>Product</td>
	    	<td>Progress® Kendo UI for Vue</td>
	    </tr>
    </tbody>
</table>

## 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`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#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`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/knowledge-base/grid-details-template-with-grouping/source.txt)