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

Environment

Description

This Knowledge base article demonstrates how the Grouping, row Details and custom template functionality of the Native 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:

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

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