New to Kendo UI for Vue? Start a free 30-day trial

Environment

Product Version3.0.1
ProductProgress® 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:

In this article

Not finding the help you need?