How to add custom button to grid ui

Question

I am new for developing Magento 2.

I create a grid component and it is easy to add export button, filter button or massaction dropdown. However, I want to add a custom button into a grid ui. What should I do?

Answer 1

I don't know why you want to keep back button in your grid listing but this is how you can define any button in your ui component grid

    <item name="buttons" xsi:type="array">
        <item name="add" xsi:type="array">
            <item name="name" xsi:type="string">add</item>
            <item name="label" xsi:type="string">Add Custom</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*/new</item>
        </item>
    </item>

here */*/new is your path to the controller you want to call.

Add the above code inside the <argument name="data" xsi:type="array"> tag

Updated

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="context" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\Context</argument>
        <argument name="namespace" xsi:type="string">custom_grid_listing</argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">custom_grid_listing.custom_grid_listing_data_source</item>
            <item name="deps" xsi:type="string">custom_grid_listing.custom_grid_listing_data_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">add</item>
                <item name="label" xsi:type="string">Add Custom</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/new</item>
            </item>
        </item>
    </argument>
    <dataSource name="custom_grid_listing_data_source">
        ---
    </dataSource>