New to Kendo UI for Vue? Start a free 30-day trial
Define a Grid Custom Cell Template with Grouping and Selection
Environment
| Product Version | 3.0.1 |
| Product | Progress® Kendo UI for Vue Native |
Description
The below example demonstrates how we can keep the Grouping and Select functionality of the Grid while using a custom cell template inside the Kendo UI for Vue Native Grid
Solution
To define a custom template, use the Use a cellRender prop of the Native Grid. Initialize the CustomCell component inside the slot template that is passed to the cellRender as demonstrated below:
<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"
@selectionchange="selectionChange"
@click="clickHandler(props.dataItem)" />
</template>Runnable example
Example
View Source
Change Theme:
