# Add an Popup Action Button to a Grid Row

## Environment

<table>
    <tbody>
	    <tr>
	    	<td>Product Version</td>
	    	<td>2.4.0</td>
	    </tr>
	    <tr>
	    	<td>Product</td>
	    	<td>Progress® Kendo UI for Vue</td>
	    </tr>
    </tbody>
</table>

## Description

This Knowledge base article shows how we can add an action button to the rows of the 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`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumnprops#cell) column property. The custom template passed to this property is defined as follows:

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

You can see the definition of the `custom` component in the `ActionCell.vue` file in the example below.

### Runnable example

[Demo Source](https://demos.telerik.com/kendo-vue-ui/knowledge-base/grid-add-action-button-with-popup/source.txt)