How To Add Magento2 Dynamic Rows DeleteAction?

Question

I am Generating Form using <DynamicRows>
All Fields Are Properly generating.
Now I want to Add DELETE Action in that Dynamically Generated Rows.
Like this

My Ui Component Structure is

Which field did I forget to add in uicomponent.?

Answer 1

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>

Answer 2

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

Answer 3

Add into your ui-form xml

<fieldset name="label_setting">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="collapsible" xsi:type="boolean">false</item>
            <item name="label" xsi:type="string" translate="true">Dynamic Rows</item>
            <item name="sortOrder" xsi:type="number">20</item>
        </item>
    </argument>
    <container name="discount_row">
        <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">VendoreName_ModuleName/dynamic-rows/grid</item><!--  change Template file -->
                <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="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="componentType" xsi:type="string">container</item>
                </item>
            </argument>
            <field name="field_name1">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="label" xsi:type="string" translate="true">Field #1</item>
                        <item name="formElement" xsi:type="string">input</item>
                        <item name="source" xsi:type="string">field_name1</item>
                        <item name="dataScope" xsi:type="string">field_name1</item>
                        <item name="sortOrder" xsi:type="string">100</item>
                        <!-- <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item> -->
                    </item>
                </argument>
            </field>
            <field name="field_name2">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="label" xsi:type="string" translate="true">Field #2</item>
                        <item name="formElement" xsi:type="string">input</item>
                        <item name="source" xsi:type="string">field_name2</item>
                        <item name="dataScope" xsi:type="string">field_name2</item>
                        <item name="sortOrder" xsi:type="string">110</item>
                        <!-- <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item> -->
                    </item>
                </argument>
            </field>
            <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">130</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>

add this template file

VendoreName/ModuleName/view/adminhtml/web/template/dynamic-rows

grid.html

<div class="admin__field-complex" if="$data.addButton">
    <div class="admin__field-complex-title">
        <span class="label" translate="'Add Your Title'"></span>
    </div>

    <div class="admin__field-complex-elements">
        <render args="fallbackResetTpl" if="$data.showFallbackReset && $data.isDifferedFromDefault"/>
        <button attr="{disabled: disabled}"
                class="action-secondary"
                type="button"
                click="processingAddChild.bind($data, false, false, false)">
            <span translate="addButtonLabel"/>
        </button>
    </div>

    <!-- <div class="admin__field-complex-content"
         translate="'User agent exceptions override product and CMS pages rules.'"></div> -->
</div>

<div class="admin__field admin__field-wide"
     visible="visible"
     disabled="disabled"
     css="$data.setClasses($data)"
     attr="'data-index': index">
    <label if="$data.label" class="admin__field-label" attr="for: $data.uid">
        <span translate="$data.label"/>
    </label>

    <div class="admin__field-control" data-role="grid-wrapper">
        <div class="admin__control-table-pagination" visible="!!element.getRecordCount()">
            <div class="admin__data-grid-pager">
                <button class="action-previous" type="button" data-bind="attr: {title: $t('Previous Page')}, click: previousPage, disable: isFirst()"></button>
                <input class="admin__control-text" type="number" data-bind="attr: {id: ++ko.uid}, value: currentPage">
                <label class="admin__control-support-text" data-bind="attr: {for: ko.uid}, text: 'of ' + pages()"></label>
                <button class="action-next" type="button" data-bind="attr: {title: $t('Next Page')}, click: nextPage, disable: isLast()"></button>
            </div>
        </div>
        <div class="admin__control-table-wrapper">
            <table class="admin__dynamic-rows data-grid" data-role="grid">
                <thead if="element.columnsHeader">
                    <tr>
                        <th if="$data.dndConfig.enabled"
                            class="data-grid-draggable-row-cell"/>

                        <th repeat="foreach: labels, item: '$label'"
                            class="data-grid-th"
                            visible="$label().visible"
                            disable="$label().disabled"
                            css="setClasses($label())">
                            <span translate="$label().label"/>
                        </th>
                    </tr>
                </thead>

                <tbody>
                    <tr repeat="foreach: elems, item: '$record'"
                        class="data-row"
                        css="'_odd-row': $index % 2">
                        <td if="dndConfig.enabled"
                            class="data-grid-draggable-row-cell"
                            template="name: dndConfig.template, data: dnd"/>

                        <!-- ko foreach: { data: $record().elems(), as: 'elem'}  -->
                        <td if="elem.template"
                            visible="elem.visible() && elem.formElement !== 'hidden'"
                            disable="elem.disabled"
                            css="$parent.setClasses(elem)"
                            template="elem.template"
                            attr="'data-index': index"/>
                        <!-- /ko -->
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- <div class="messages">
    <div class="message message-notice notice">
        <span
            translate="'Search strings are either normal strings or regular expressions (PCRE). They are matched in the same order as entered.'"></span>
        <br>
        <span
            translate="'Examples'"></span>:
        <span class="code-sample">Firefox: /^mozilla/i</span>
    </div>
</div> -->

Output given below :