Zend certified PHP/Magento developer

Actions via Ajax on UI Component listing

I’m adding some custom data to products, namely fixed quantities. These are to appear on the product edit page under a Quantities “tab”. I’m using UI Components not blocks. After a great deal more effort than should have been necessary I’ve got the following working:

Quantities tab

All well and good! I’ve added a Delete action and that’s working too. However, it’s only working by refreshing the product page on delete of a quantity. What I want is to delete a quantity via Ajax and have the UI grid refresh, not have to refresh the entire product page, losing any other changes that might have been made.

I’ve read countless articles and found one trying to do the exact same thing but no replies. Another to do with mass actions working the same way had resorted to overwriting a core JS module (via preferences) to achieve this. That approach cannot be the right way to do this. But I can find nothing in documentation or examples that even begins to explain how to implement UI listing grid actions via Ajax.

Anyone have any ideas?

I assume that I need to change the delete action column where it generates the action link for each row to an Ajax request:

public function prepareDataSource(array $dataSource)
{
    if (isset($dataSource['data']['items'])) {
        foreach ($dataSource['data']['items'] as &$item) {
            if (isset($item['quantity_id'])) {
                $viewUrlPath = $this->getData('config/viewUrlPath');
                $urlEntityParamName = $this->getData('config/urlEntityParamName');
                $item[$this->getData('name')] = [
                    'view' => [
                        'href' => $this->urlBuilder->getUrl(
                            $viewUrlPath,
                            [
                                $urlEntityParamName => $item['quantity_id'],
                            ]
                        ),
                        'label' => __('Delete'),
                    ],
                ];
            }
        }
    }

    return $dataSource;
}

Then there must be some configuration setting of the UI component to enable it to handle an Ajax response on the actions column and refresh accordingly. But despite many hours of trawling I can’t find anything to explain it. It must be possible – surely!?