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.?

  • but it looks like you have a delete button at the end of the row – Marius Mar 22 '17 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 '17 at 13:58
11

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>
| improve this answer | |
  • After Adding This <actionDelete>. Row Not Genrating When i Click Add New. – Rizwan Khan Mar 22 '17 at 14:05
  • 1
    See my edit. Maybe this one works. – Marius Mar 22 '17 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. – Rizwan Khan Mar 22 '17 at 14:20
  • Thank You Its Working Now ... i Added Your Edited ActionDelete In My UIcomponent Form and its Working Fine.. thankx. – Rizwan Khan Mar 22 '17 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 ? – Manthan Dave Feb 28 '18 at 12:03
3

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

| improve this answer | |
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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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