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?
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this communityI 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>