Magento 2.3 On mass action how can I refresh listing grid using ajax (without page refresh)

[electroid]

As I see by default once magento2 mass action applied, default logic is to refresh the page. I would like to have grid refreshing without actual page reload but rather from js once massaction completed. I have successfully refershed grid once I add new item with my custom scripts using js, however I can't find way easy way to call js for massaction and as far as I see for massaction magento2 just doing redirect to the actual controller page there action happen.

Here's part of my listing grid for massdelete (working just fine but with page refresh)

            <action name="massdelete">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">massdelete</item>
                        <item name="label" xsi:type="string" translate="true">Delete</item>                        
                        <item name="url" xsi:type="url" path="electroidlab/connect_ui/massDelete"/>                        
                        <item name="confirm" xsi:type="array">
                            <item name="title" xsi:type="string" translate="true">Attention</item>
                            <item name="message" xsi:type="string" translate="true">Are you sure want to delete?</item>
                        </item>                                                                       
                    </item>
                </argument>

Here's part of the controller with redirect. If I comment redirect part, then it will be just white page with controller path in url

                    public function execute()
    {
...                    $collection = $this->filter
                                        ->getCollection(                                            $this->collectionFactory->create()
                                        );                    $catRecordDeleted = 0;
                    foreach ($collection as $category) {                        $category->setId($category->getEntityId());                        $category->delete();
                        ++$catRecordDeleted;
                    }                    $this->messageManager->addSuccess(                        __("A total of %1 record(s) have been deleted.", $catRecordDeleted)
                    );
            
                    
                    return $this->resultRedirectFactory->create()->setPath(
                        'electroidlab/connect/edit',
                        [
                        'id'=>$this->getRequest()->getParam('id'),
                        '_secure' => $this->getRequest()->isSecure()
                        ]
                    );
                    
            ...

    }

Is there a way to make default massaction without actual page refresh? Thanks!

[gaurav_harsh1]

Hello @electroid 

Check the answers from this article, it may help you :

https://magento.stackexchange.com/questions/153949/how-to-reload-ui-component-grid-table-with-js-in-...

[Bhanu Periwal]

Hi @electroid 

Set the use_ajax property of the grid block to true:

$this->setUseAjax(true)

This can be done in the _construct() method.

Then implement the method getGridUrl() on your grid block to return the Ajax request URL

public function getGridUrl()
{
    return $this->getUrl('*/*/grid', array('_current' => true));
}

Then you need to create the controller action method to process the Ajax request. It's simple, it only needs to instantiate and render the grid block. You can do that either via $this->loadLayout(false)->renderLayout() and add the grid block via layout XML, or instantiate and render it using PHP:

$this->getResponse()->setBody(    $this->getLayout()->createBlock('my_module/adminhtml_my_grid')->toHtml()
)

Hope It may help!
Problem Solved ? Please click on 'Kudos' & Accept as Solution!

[electroid · Accepted solution]

In order to solve that I was needed to extend massactions.js and override default callback function.

Full code available here https://magento.stackexchange.com/questions/317277/magento-2-3-on-mass-action-how-can-i-refresh-list...