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:

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"
            @selectionchange="selectionChange"
            @click="clickHandler(props.dataItem)" />
</template>

Runnable example

Change Theme

Theme

Loading ...