1.9 KiB
1.9 KiB
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 %}