Add pupup in massaction magento grid ui component

Step 1 :

<massaction name="listing_massaction">            
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">customergrid_extend.customergrid_extend.customergrid_extend.ids</item>
                    <item name="indexField" xsi:type="string">entity_id</item>
                    <item name="component" xsi:type="string">WebtechBuzz_Customergrid/js/grid/upload-item</item> 

                </item>
            </argument>
            
           
        </massaction>

    

Step 2: upload-item.js

define([
    'Magento_Ui/js/grid/tree-massactions',
    'Magento_Ui/js/modal/modal'
], function (Massactions, modal) {
    'use strict';
    return Massactions.extend({
        defaults: {
            template: 'WebtechBuzz_Customergrid/ui/grid/upload-item',
        },
        openModelPopup: function () {
            var options = {
                'type': 'popup',
                'title': 'Upload your Customer CSV',
                'modalClass': 'customer_return_popup',
                'responsive': true,
                'innerScroll': true,
                'buttons': [{
                    text: jQuery.mage.__('Back'),
                    class: 'back-button',
                    click: function () {
                        this.closeModal();
                        // any javascript coode
                    }
                }]
            };
                var popup = modal(options, jQuery('#upload-item')); 
                jQuery("#upload-item").modal("openModal");

        },
    });
});

Step :3 upload-item.html

<div class="action-menu-items">
    <ul>
        <li>
            <button  id="uploadBtn" title="Upload"  data-bind="click:openModelPopup" class="action submit primary">
             <span>Upload</span>
            </button> 
        </li>
    </ul>
        <ul class="action-menu massactionbtn" each="data: actions, as: 'action'" css="_active: opened">
            <li style="background: #1979c3;" css="_visible: $data.visible, _parent: $data.actions">
                <span class="action-menu-item" text="label" click="$parent.applyAction.bind($parent, type)"/>
                <render args="name: $parent.submenuTemplate, data: $parent" if="$data.actions"/>
            </li>
        </ul>
   
</div>

<div id="upload-item" style="display:none">
<form id="customer-ddd-form-" method="get" enctype="multipart/form-data" action="">
   
  Hello World      
      
    
</form>    
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *