1

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!

0

Finally was able to solve that problem. Magento2 massactions.js running utils.submit within defaultCallback method:

defaultCallback: function (action, data) {
...
    utils.submit({
        url: action.url,
        data: selections
    });
}

In order to have grid to working with ajax I have to override defaultCallback using mixins and change default utils.submit to utils.ajaxSubmit for my custom action. Here's the code for my module requirejs-config.js

var config = {

    config: {
         mixins: {
             'Magento_Ui/js/grid/massactions': {
                 'ElectroidLab_Custom/js/grid/massactions': true
             }
         }
     }
}

Extended massactions.js code

define([
    'underscore',
    'uiRegistry',
    'mageUtils',
    'Magento_Ui/js/lib/collapsible',
    'Magento_Ui/js/modal/confirm',
    'Magento_Ui/js/modal/alert',
    'mage/translate'
], function (_, registry, utils, Collapsible, confirm, alert, $t) {
    'use strict';

    return function (Component) {
        return Component.extend({
 
            defaultCallback: function (action, data) {

                var itemsType = data.excludeMode ? 'excluded' : 'selected',
                    selections = {};
    
                if (itemsType === 'excluded' && data.selected && data.selected.length) {
                    itemsType = 'selected';
                    data[itemsType] = _.difference(data.selected, data.excluded);
                }
    
                selections[itemsType] = data[itemsType];
    
                if (!selections[itemsType].length) {
                    selections[itemsType] = false;
                }
    
                _.extend(selections, data.params || {});
                // code for my massaction running with ajaxSubmit
                if (action.url.indexOf("electroidlab/connect_ui/massDelete") !== -1) {
                    var config = {ajaxSaveType: "simple"};
                    utils.ajaxSubmit({
                        url: action.url,
                        data: selections
                    }, config).done(function(a) {
                        var gridName = "electroidlab_connect_list.electroidlab_connect_list_data_source";
                        if (gridName) {
                            var params = [];
                            var target = registry.get(gridName);
                            if (target && typeof target === 'object') {
                                target.set('params.t ', Date.now());
                            }
                        }
                    });
                } else {
                    // default submit
                    utils.submit({
                        url: action.url,
                        data: selections
                    });
                }
            }
        });
    }
});

All working fine, grid refreshed via ajax on massaction.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.