6

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 enter image description here

My Ui Component Structure is
enter image description here

Which field did I forget to add in uicomponent.?

2
  • but it looks like you have a delete button at the end of the row
    – Marius
    Mar 22, 2017 at 13:57
  • 1
    I think you should post the ui component xml you already have. As text not as an image because it would be easier to follow
    – Marius
    Mar 22, 2017 at 13:58

3 Answers 3

12

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">ui/dynamic-rows/templates/default</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>
11
  • After Adding This <actionDelete>. Row Not Genrating When i Click Add New. Mar 22, 2017 at 14:05
  • 1
    See my edit. Maybe this one works.
    – Marius
    Mar 22, 2017 at 14:10
  • Yes Working .. But i think Design is little bit diffrent in What You suggest.its Working Fine. Mine Design Is like as image Given At top of question. Mar 22, 2017 at 14:20
  • Thank You Its Working Now ... i Added Your Edited ActionDelete In My UIcomponent Form and its Working Fine.. thankx. Mar 22, 2017 at 14:37
  • @Marius - +1 from my side, you are always legend , do you know how we can add this dynamic rows same like tier pricing concept ? Feb 28, 2018 at 12:03
4

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

2
0

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 : enter image description here

1
  • hello @Msquare, how can we limit the rows to maximum 10? Jan 28, 2021 at 7:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.