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;
    }

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.

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;
}