Add an Popup Action Button to a Grid Row

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:

js

<template v-slot: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

Change Theme

Theme

Loading ...