Magento2 How To Add a Custom Button In Admin Grid

In Magento 2, if we need to add a custom button in admin grid , we will need to create a simple custom grid module. Here we are going to add a custom button “Show Row Details” to custom grid and clicking the same button, we will show a form in popup which will be responsible to show record details.

For this, we will need to follow few simple steps:

  1. Add customer_listing.xml file to your module on below path: app/code/Magemeta/Grid/view/adminhtml/ui_component/customer_listing.xml
  2. Now add a custom button in this xml file:
<?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="customer_columns">
        <actionsColumn name="send_mail" class="Magemeta\Grid\Ui\Component\Listing\Columns\ShowDetails">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magemeta_Grid/js/grid/columns/showdetails</item>
                    <item name="indexField" xsi:type="string">entity_id</item>
                    <item name="sortable" xsi:type="boolean">false</item>
                    <item name="label" xsi:type="string" translate="true">Show Details</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                </item>
            </argument>
        </actionsColumn>
    </columns>
</listing>

3. Now we need to display the details on click on this custom “Show Row Details” button, so we will need to create a ui component class Magemeta\Grid\Ui\Component\Listing\Columns\Sendmail :

<?php
namespace Magemeta\Grid\Ui\Component\Listing\Columns;
 
use Magento\Framework\UrlInterface;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;
 
class ShowDetails extends Column
{
    /**
     * @var UrlInterface
     */
    protected $urlBuilder;
 
    /**
     * Constructor
     *
     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param UrlInterface $urlBuilder
     * @param array $components
     * @param array $data
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        UrlInterface $urlBuilder,
        array $components = [],
        array $data = []
    ) {
        $this->urlBuilder = $urlBuilder;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }
 
    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');
            foreach ($dataSource['data']['items'] as & $item) { 
                $item[$fieldName . '_html'] = "<button class='button'><span>Show Row Details</span></button>";
                $item[$fieldName . '_title'] = __('Please enter row details');
                $item[$fieldName . '_cancellabel'] = __('Reset');
                $item[$fieldName . '_customerid'] = $item['entity_id'];
 
                $item[$fieldName . '_formaction'] = $this->urlBuilder->getUrl('grid/customer/showdetails');
            }
        }
 
        return $dataSource;
    }
}

4. Next we will need to create a js file as showdetails.js on path app/code/Magemeta/Grid/view/base/web/js/grid/columns/ which will be responsible for button click action.

define([
    'Magento_Ui/js/grid/columns/column',
    'jquery',
    'mage/template',
    'text!Magemeta_Grid/templates/grid/cells/customer/showdetails.html',
    'Magento_Ui/js/modal/modal'
], function (Column, $, mageTemplate, showDetailsPreviewTemplate) {
    'use strict';
 
    return Column.extend({
        defaults: {
            bodyTmpl: 'ui/grid/cells/html',
            fieldClass: {
                'data-grid-html-cell': true
            }
        },
        gethtml: function (row) {
            return row[this.index + '_html'];
        },
        getFormaction: function (row) {
            return row[this.index + '_formaction'];
        },
        getCustomerid: function (row) {
            return row[this.index + '_customerid'];
        },
        getLabel: function (row) {
            return row[this.index + '_html']
        },
        getTitle: function (row) {
            return row[this.index + '_title']
        },
        getCancellabel: function (row) {
            return row[this.index + '_cancellabel']
        },
        preview: function (row) {
            var modalHtml = mageTemplate(
                showDetailsPreviewTemplate,
                {
                    html: this.gethtml(row), 
                    title: this.getTitle(row), 
                    label: this.getLabel(row), 
                    formaction: this.getFormaction(row),
                    customerid: this.getCustomerid(row),
                    cancellabel: this.getCancellabel(row), 
                    linkText: $.mage.__('Go to Details Page')
                }
            );
            var previewPopup = $('<div/>').html(modalHtml);
            previewPopup.modal({
                title: this.getTitle(row),
                innerScroll: true,
                modalClass: '_image-box',
                buttons: []}).trigger('openModal');
        },
        getFieldHandler: function (row) {
            return this.preview.bind(this, row);
        }
    });
});

5. Next we have to create a template file showdetails.html on path app/code/Magemeta/Grid/view/base/web/templates/grid/cells/customer/ and this html template file we are using in above js file to show row details form.

<form id="send-mail-form-<%- customerid %>" method="get" enctype="multipart/form-data" action="<%- formaction %>">
    <div class="modal-body">
        <div class="bootbox-body">
            <textarea class="bootbox-input bootbox-input-text form-control required-entry" name="send_message" rows="4" cols="83"></textarea>
            <input type="hidden" name="entity_id" value="<%- customerid %>">         
        </div>
    </div>
    <div class="modal-footer">
        <span class="error"></span>
        <button type="reset" class="btn btn-default"><span><%- cancellabel %></span></button>
        <span class="clear"></span>
    </div>
</form>

5. Finally you will see a custom button “Show Row Details” which is visible in customer grid:

Hope this will help you guys!!!

Leave a Reply