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="" 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>

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 :

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.

], 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(
                    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);
                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 class="modal-footer">
        <span class="error"></span>
        <button type="reset" class="btn btn-default"><span><%- cancellabel %></span></button>
        <span class="clear"></span>

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