How to add Button in Magenot 2 Sales order Grid with out a link?

Question

I want to add a button without a link at the sales grid top in Magento 2.4 SS:

Anyone has any idea how to add only a button with a custom ( ID or class ).

Any help is appreciated.

Answer 1

app/code/Vendor/Module/view/adminhtml/ui_component/sales_order_grid.xml

    <?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">
    <settings>
        <buttons>
            <button name="buttonuniquename" class="Vendor\Module\Block\Adminhtml\Sales\CustomButton"/>
        </buttons>
    </settings>
</listing>

app/code/Vendor/Module/Block/Adminhtml/Sales/CustomButton.php

    <?php
namespace Vendor\Module\Block\Adminhtml\Sales;

use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
use Magento\Backend\Block\Widget\Context;
use Magento\Framework\AuthorizationInterface;

class CustomButton implements ButtonProviderInterface
{
    /**
     * @var AuthorizationInterface
     */
    private $authorization;

    /**
     * @var Context
     */
    private $context;

    /**
     * CustomButton constructor.
     *
     * @param AuthorizationInterface $authorization
     * @param Context $context
     */
    public function __construct(
        AuthorizationInterface $authorization,
        Context $context
    ) {
        $this->authorization = $authorization;
        $this->context = $context;
    }

    /**
     * @return array
     */
    public function getButtonData()
    {
          
        return [
            'label' => __('Your Button Name'),
            'on_click' => 'javascript:void(0)',
            'class' => 'your custom classs',
            'sort_order' => 10
        ];
    }

    
}

Answer 2

Just add javascript:void(0) in getUrl(), Try Like this.

/**
     * @return array|bool
     */
    public function getButtonData()
    {
        if ($id = $this->container->getRequest()->getParam('id')) {
            $data = [
                'class' => 'action-secondary scalable delete',
                'label' => __('Delete'),
                'on_click' => "deleteConfirm('Are You Sure Want To Delete This Profile ?','" . $this->getDeleteUrl($id) . "')",
                'sort_order' => 20,
                'data_attribute' => [
                    'url' => $this->getDeleteUrl()
                ],
            ];
            return $data;
        }
        return false;
    }

    /**
     * @param $id
     * @return string
     */
    public function getDeleteUrl()
    {
        return 'javascript:void(0)';
    }

Answer 3

Try adding 'on_click' => 'javascript:void(0)' to your button data array.

For example your array could be something like below

public function getButtonData()
    {
        $data = [
            'label' => __('Custom Button 1'),
            'class' => 'save primary',
            'sort_order' => 90,
            'on_click' => 'javascript:void(0)'
        ];
        return $data;
    }

Answer 4

You can check that above example for ui_component-> grid.xml file ex:

<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">custom_grid.custom_grid_source</item>
        <item name="deps" xsi:type="string">custom_grid.custom_grid_source</item>
    </item>
    <item name="spinner" xsi:type="string">custom_grid_columns</item>
    <item name="buttons" xsi:type="array">
        <item name="add" xsi:type="array">
            <item name="name" xsi:type="string">import</item>
            <item name="label" xsi:type="string" translate="true">Import</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*</item>
        </item>
    </item>
</argument>

You can add more buttons similarly and provide url where you want to redirect or make it like above