Magento 2: Add Custom Button to Admin Grid Row – How to

adminhtmlgridmagento2

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

Best Answer

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.

Related Topic