58 строки
1.9 KiB
Markdown
58 строки
1.9 KiB
Markdown
---
|
|
title: Define a Grid Custom Cell Template with Grouping and Selection
|
|
description: 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.
|
|
type: how-to
|
|
page_title: Implement a Grid Cell Template with Grouping and Selection - Kendo UI for Vue Native Grid
|
|
slug: grid-custom-cell-grouping-and-selection
|
|
tags: grid, rows, group, selection, kendovue
|
|
res_type: kb
|
|
category: knowledge-base
|
|
---
|
|
|
|
## Environment
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>Product Version</td>
|
|
<td>3.0.1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Product</td>
|
|
<td>Progress® Kendo UI for Vue Native</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
## 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`](slug:api_grid_gridprops#toc-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
|
|
{% 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 %}
|