magento 2 : add custom button to admin grid row

Question

I want to add a custom button to the action column of my rows in the admin grid.

i realise it must be added via extending Columns:

namespace Custom\Example\Ui\Component\Listing\Columns;
class EventActions extends Column
{
public function prepareDataSource(array $dataSource)
 {
 if (isset($dataSource['data']['items'])) {
 $storeId = $this->context->getFilterParam('store_id');
 foreach ($dataSource['data']['items'] as &$item) {
 $item[$this->getData('name')]['edit'] = [
 'href' => $this->urlBuilder->getUrl(
 'custom/example/edit',
 ['id' => $item['id'], 'store' => $storeId]
 ),
 'label' => __('Add Available Date'),
 'hidden' => false,
 ];
 }
 }
 return $dataSource;
 }
}

I am however not sure how to add HTML to the above method.

i tried this from this source but it did not work:

public function prepareDataSource(array $dataSource)
 {
 if (isset($dataSource['data']['items'])) {
 $fieldName = $this->getData('name');
 foreach ($dataSource['data']['items'] as & $item) { 
 $item[$fieldName . '_html'] = "<button class='button'><span>Send Mail</span></button>";
 $item[$fieldName . '_title'] = __('Please enter a message that you want to send to customer');
 $item[$fieldName . '_submitlabel'] = __('Send');
 $item[$fieldName . '_cancellabel'] = __('Reset');
 $item[$fieldName . '_customerid'] = $item['calender_id'];
 $item[$fieldName . '_formaction'] = $this->urlBuilder->getUrl('custom/example/edit');
 }
 }
 return $dataSource;
 }

UPDATE -- THE SOLUTION.

thanks to @mohit Rane for this elegant solution.

 public function prepareDataSource(array $dataSource) {
 if (isset($dataSource['data']['items'])) {
 $storeId = $this->context->getFilterParam('store_id');
 foreach ($dataSource['data']['items'] as &$item) {
 $name = $this->getData('name');
 $http = $this->urlBuilder->getUrl(
 'custom/example/edit', ['id' => $item['id'], 'store' => $storeId]
 );
 $item[$name] = html_entity_decode("<a href='{$http}'><button>Edit</button></a>");
 }
 }
 return $dataSource;
 }

• Mohit Rane: what do you mean "did not work" did you get any error?
• theSeeker: @MohitRane no errors. It came back blank. but i dont want any functionality in the button. i just want a plane button . nothing more

Answer 1

You can use the following code to add a simple button,

namespace Custom\Example\Ui\Component\Listing\Columns;
class EventActions extends Column
{
 public function prepareDataSource(array $dataSource)
 {
 if (isset($dataSource['data']['items'])) {
 $storeId = $this->context->getFilterParam('store_id');
 foreach ($dataSource['data']['items'] as &$item) {
 $name = $this->getData('name');
 $item[$name] = 
 html_entity_decode('<button>Test</button>');
 }
 }
 return $dataSource;
 }
}

Hope it helps.

• theSeeker: Hi @Mohit Rane. i am sorry but it does not work. its blank. have you tried it before?
• Mohit Rane: yes it's working in my module
• Mohit Rane: please check now, I've updated an answer.
• theSeeker: no. it does not work for me. what version of magento 2 are you using?
• Mohit Rane: I'm using 2.2.6 if you could share a whole file code to the question, it would be much better to resolve the issue

Answer 2

Try with this code

const URL_PATH_MAIL = 'custom/example/edit';
public function prepareDataSource(array $dataSource)
{
 if (isset($dataSource['data']['items'])) {
 $storeId = $this->context->getFilterParam('store_id');
 foreach ($dataSource['data']['items'] as &$item) {
 $item[$name]['delete'] = [
 'href' => $this->urlBuilder->getUrl(self::URL_PATH_MAIL , ['customer_id' => $item['customer_id']]),
 'label' => __('Send Mail'),
 'confirm' => [
 'title' => __('Send Mail to %1', $item['customer_id']),
 'message' => __('Are you sure you want to Send Mail %1 record?', $item['customer_id']),
 '__disableTmpl' => true,
 ],
 'post' => true,
 ];
 }
 }
 return $dataSource;
}

• theSeeker: Hi. i am trying to add a button to the row. you have not added a html button. so, i am not clear what you have tried to do