How to add javascript event to action button from product grid in backend

Question

I am trying to open a new window on custom action link from product grid in admin panel.

I created vendor/magento/module-catalog/view/adminhtml/ui_component/product_listing.xml into custom module with code.

<actionsColumn name="actions" class="Namespace\Modulename\Ui\Component\Listing\Columns\ProductActions">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">entity_id</item>
                    <item name="sortOrder" xsi:type="number">200</item>
                </item>
            </argument>
        </actionsColumn>

In Namespace/Modulename/Ui/Component/Listing/Columns/ProductActions.php i have added custom action button Test.

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(
                        'catalog/product/edit',
                        ['id' => $item['entity_id'], 'store' => $storeId]
                    ),
                    'label' => __('Edit'),
                    'hidden' => false,
                ];
                $item[$this->getData('name')]['test'] = [
                    'href' => 'javascript:void(0)',
                    'label' => __('Test'),
                    'hidden' => false,
                ];
            }
        }

        return $dataSource;
    }

Now i need to call JS function on click of this action button and then open a new window. I tried adding onclick and data-mage-init attribute there but it doesnot work.

Any solution?

Answer 1

I think you can extend Magento/Ui/view/base/web/templates/grid/cells/actions.html. Second solution, you can add a new column action for test like

<actionsColumn name="test_actions" class="Space\YourModule\Ui\Component\Listing\Column\TestAction">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
            <item name="indexField" xsi:type="string">id</item>
            <item name="sortable" xsi:type="boolean">false</item>
            <item name="label" xsi:type="string" translate="true">Test Action</item>
            <item name="urlEntityParamName" xsi:type="string">id</item>
        </item>
    </argument>
</actionsColumn>

And with class Space\YourModule\Ui\Component\Listing\Column\TestAction in prepareDataSource, we have :

$url = $this->urlBuilder->getUrl(
    'test_action',
    ['id' => $item['id']]
);

$html = '<a href="'. $url.'" target="_blank">
<button class="action-scalable action-default scalable">Test</button></a>';
$item[$this->getData('name')] = $html;