How To Add Magento2 Dynamic Rows DeleteAction?
Your fieldset should look like this:
<fieldset name="fieldset_name_here">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Fieldset label goes here</item>
<item name="sortOrder" xsi:type="number">10</item>
</item>
</argument>
<container name="give_it_a_unique_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/dynamic-rows/dynamic-rows</item>
<item name="template" xsi:type="string">Magento_Backend/dynamic-rows/grid</item>
<item name="componentType" xsi:type="string">dynamicRows</item>
<item name="recordTemplate" xsi:type="string">record</item>
<item name="deleteButtonLabel" xsi:type="string">Remove</item>
<item name="addButtonLabel" xsi:type="string">Add New </item>
<item name="deleteProperty" xsi:type="boolean">false</item>
<item name="dndConfig" xsi:type="array">
<item name="enabled" xsi:type="boolean">false</item>
</item>
</item>
</argument>
<container name="record">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Record label goes here</item>
<item name="component" xsi:type="string" translate="true">Magento_Ui/js/dynamic-rows/record</item>
<item name="isTemplate" xsi:type="boolean">true</item>
<item name="is_collection" xsi:type="boolean">true</item>
<item name="showFallbackReset" xsi:type="boolean">false</item>
</item>
</argument>
<field name="first_field_here">
<!-- add field configuration here-->
</field>
<!-- add as many fields as you need -->
<actionDelete>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="componentType" xsi:type="string">actionDelete</item>
<item name="dataType" xsi:type="string">text</item>
<item name="fit" xsi:type="boolean">false</item>
<item name="label" xsi:type="string">Actions</item>
<item name="sortOrder" xsi:type="string">100</item>
<item name="additionalClasses" xsi:type="string">data-grid-actions-cell</item>
<item name="template" xsi:type="string">Magento_Backend/dynamic-rows/cells/action-delete</item>
</item>
</argument>
</actionDelete>
</container>
</container>
</fieldset>
In Magento 2.2.8 and 2.3.1 latest version the dynamicRows
delete button can also be added as the following.
<actionDelete template="Magento_Backend/dynamic-rows/cells/action-delete" sortOrder="100">
<settings>
<componentType>actionDelete</componentType>
<dataType>text</dataType>
<label>Actions</label>
<additionalClasses>
<class name="data-grid-actions-cell">true</class>
</additionalClasses>
</settings>
</actionDelete>
And the complete dynamicRows
component can be added as follwing: (inside a form
under any fieldset
):
<dynamicRows name="marketplace_store_mapping" sortOrder="1" component="Magento_Ui/js/dynamic-rows/dynamic-rows" template="ui/dynamic-rows/templates/default">
<settings>
<dndConfig>
<param name="enabled" xsi:type="boolean">false</param>
</dndConfig>
<deleteValue>true</deleteValue>
<addButton>true</addButton>
<addButtonLabel>Add Store</addButtonLabel>
<scopeLabel>[GLOBAL]</scopeLabel>
<label translate="true">Stores</label>
<visible>true</visible>
<componentType>dynamicRows</componentType>
</settings>
<container name="record" component="Magento_Ui/js/dynamic-rows/record">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="isTemplate" xsi:type="boolean">true</item>
<item name="is_collection" xsi:type="boolean">true</item>
<item name="componentType" xsi:type="string">container</item>
</item>
</argument>
<field name="store_id" component="Magento_Ui/js/form/element/select" formElement="select">
<settings>
<dataType>text</dataType>
<label translate="true">Store</label>
<disabled>false</disabled>
<dataScope>store_id</dataScope>
</settings>
<formElements>
<select>
<settings>
<options class="Magento\Store\Ui\Component\Listing\Column\Store\Options"/>
</settings>
</select>
</formElements>
</field>
<field name="marketplace" component="Magento_Ui/js/form/element/select" formElement="select">
<settings>
<dataType>text</dataType>
<label translate="true">Marketplace</label>
<disabled>false</disabled>
<visible>true</visible>
<dataScope>min_sale_qty</dataScope>
</settings>
<formElements>
<select>
<settings>
<options class="MyVendor\MyModule\Model\Source\Marketplace"/>
</settings>
</select>
</formElements>
</field>
<actionDelete template="Magento_Backend/dynamic-rows/cells/action-delete" sortOrder="100">
<settings>
<componentType>actionDelete</componentType>
<dataType>text</dataType>
<label>Actions</label>
<additionalClasses>
<class name="data-grid-actions-cell">true</class>
</additionalClasses>
</settings>
</actionDelete>
</container>
</dynamicRows>
Reference: https://devdocs.magento.com/guides/v2.3/ui_comp_guide/components/ui-dynamicrows.html