kendo-vue/knowledge-base/grid-add-action-button-with-popup.md

title	description	type	page_title	slug	tags	res_type	category
Add an Popup Action Button to a Grid Row	An example on how to add a custom Action button that controls the state of the Kendo UI for Vue Native Grid.	how-to	Add an Action Button to a Grid Row - Kendo UI for Vue Native Grid	grid-add-action-button-with-popup	grid, action, button, popup, kendovue, row, style, color	kb	knowledge-base

Environment

Product Version	2.4.0
Product	Progress® Kendo UI for Vue Native

Description

This Knowledge base article shows how we can add an action button to the rows of the Native Grid component. Using this action button, we can control the data state of the Grid or change the look of the component.

Solution

The way we define the action button in the Grid column is through the cell column property. The custom template passed to this property is defined as follows:

<template v-slot:myTemplate="{props}">
	<custom :data-item="props.dataItem" 
		@actionselect="actionSelected"
		/>
</template>

The definition of the custom component can be seen in the ActionCell.vue file in the below example.

Runnable example

{% meta id:index height:560 %} {% embed_file grid-add-action-button-with-popup/main.vue preview %} {% embed_file grid-add-action-button-with-popup/ActionCell.vue %} {% embed_file grid-add-action-button-with-popup/main.js %} {% endmeta %}