kendo-vue/knowledge-base/grid-custom-cell-grouping-and-selection.md

title	description	type	page_title	slug	tags	res_type	category
Define a Grid Custom Cell Template with Grouping and Selection	An example on how to define a custom cell template that keeps the grouping and rows' selection functionality in the Kendo UI for Vue Native Grid.	how-to	Implement a Grid Cell Template with Grouping and Selection - Kendo UI for Vue Native Grid	grid-custom-cell-grouping-and-selection	grid, rows, group, selection, kendovue	kb	knowledge-base

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

{% meta id:index height:580 %} {% embed_file grid-custom-cell-grouping-and-selection/main.vue preview %} {% embed_file grid-custom-cell-grouping-and-selection/CustomCell.vue %} {% embed_file grid-custom-cell-grouping-and-selection/main.js %} {% embed_file shared/products.json %} {% endmeta %}