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

Environment

Product Version	2.4.0
Product	Progress® Kendo UI for Vue Native

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:

js

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

js

<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

Change Theme

Theme

Loading ...