Skip to content

Magento 2: Open Popup Modal on Button Click in Admin Grid

I’m using Magento 2.4, I have a column in sale_order_grid, in that column I have a button like:
enter image description here

Vendor/Module/view/adminhtml/ui_component/sales_order_grid.xml

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="sales_order_columns">
        <actionsColumn name="goflyy_order_id" class="VendorModuleUiComponentListingColumnGoFlyyGetOrder">
            <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="component" xsi:type="string">Vendor_Module/js/grid/columns/goflyygetorder</item> -->
                    <item name="label" xsi:type="string" translate="true">GoFlyy Order ID</item>
                </item>
            </argument>
        </actionsColumn>
    </columns>
</listing>

Vendor/Module/Ui/Component/Listing/Column/GoFlyyGetOrder.php

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');
            foreach ($dataSource['data']['items'] as & $item) {
                $order  = $this->orderRepository->get($item["entity_id"]);
                $goFlyyOrderId = $order->getData("goflyy_order_id");
                if($goFlyyOrderId){
                    $item[$fieldName] = "<button class='button'><span>$goFlyyOrderId</span></button>";
                }
            }
        }

        return $dataSource;
    }

What I want to do is I want to trigger an Ajax request on this button click, whatever response I get. I’ll display it in a popup modal.