Getting Started
    Native Components
    Wrapper Components
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog
New to Kendo UI for Vue? Start a free 30-day trial

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

Environment

Product Version2.4.0
ProductProgress® 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:

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

<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

Example
View Source
Change Theme:

In this article

Not finding the help you need?