Magento 2 dynamic rows add row not working

Question

I'm trying to add dynamic rows in the product edit page. I have successfully added a dynamic row UI component; the problem is the 'Add' button is not working after one row is inserted.

Thanks!

this is my product_form.xml

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="gestione_lotti_attribute_fieldset">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Lotti</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="opened" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="string">2</item>
                <item name="canShow" xsi:type="boolean">true</item>
                <item name="componentType" xsi:type="string">fieldset</item>
            </item>
        </argument>
        <dynamicRows name="dynamic_rows">
            <settings>
                <addButtonLabel translate="true">Aggiungi Lotto</addButtonLabel>
                <defaultRecord>true</defaultRecord>
                <additionalClasses>
                    <class name="admin__field-wide">true</class>
                </additionalClasses>
                <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="deleteButtonLabel" xsi:type="string">Remove</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="lotto_numero" formElement="input">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="fit" xsi:type="boolean">true</item>
                        </item>
                    </argument>
                    <settings>
                        <dataType>text</dataType>
                        <label>Lotto</label>
                    </settings>
                </field>
                <field name="lotto_data_scadenza" formElement="input">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="fit" xsi:type="boolean">true</item>
                        </item>
                    </argument>
                    <settings>
                        <dataType>text</dataType>
                        <label>Data Scadenza</label>
                    </settings>
                </field>
                <field name="lotto_quantita" formElement="input">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="fit" xsi:type="boolean">true</item>
                        </item>
                    </argument>
                    <settings>
                        <dataType>text</dataType>
                        <label>Quantità</label>
                    </settings>
                </field>
                <actionDelete name="actionDelete" sortOrder="30">
                    <settings>
                        <dataType>text</dataType>
                        <label translate="true">Actions</label>
                        <componentType>actionDelete</componentType>
                    </settings>
                </actionDelete>
            </container>
        </dynamicRows>
    </fieldset>
</form>

Try this link magento.stackexchange.com/a/307100/82670

Msquare
– Msquare

2020-11-02 04:33:16 +00:00
Commented Nov 2, 2020 at 4:33 — Msquare
– Msquare, Commented Nov 2, 2020 at 4:33

Siranjeevi K S · Accepted Answer · 2021-05-13 14:37:05Z

It seems a old version code. You can try with a updated code.

Example dynamic rows code for product_form.xml:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <dataSource name="product_form_data_source">
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
        <dataProvider class="Magento\Catalog\Ui\DataProvider\Product\Form\ProductDataProvider"
                      name="product_form_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>entity_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>

    <fieldset sortOrder="50" name="assign_applicants">
        <settings>
            <label>Fieldset label</label>
            <collapsible>true</collapsible>
             <dataScope>data.product.assign_applicants</dataScope>
        </settings>

        <dynamicRows name="dynamic_row">
            <settings>
                <visible>true</visible>
                <addButtonLabel translate="true">Add</addButtonLabel>
                <additionalClasses>
                    <class name="admin__field-wide">true</class>
                </additionalClasses>
                <componentType>dynamicRows</componentType>
                <elementTmpl>ui/dynamic-rows/templates/grid</elementTmpl>
            </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 name="'positionProvider'" xsi:type="string">container_option</item>
                    </item>
                </argument>

                <field name="title" sortOrder="20" formElement="input">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="source" xsi:type="string">block</item>
                        </item>
                    </argument>
                    <settings>
                        <validation>
                            <rule name="required-entry" xsi:type="boolean">true</rule>
                        </validation>
                        <dataType>text</dataType>
                        <label translate="true">Block Title</label>
                        <dataScope>title</dataScope>
                    </settings>
                </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">60</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>
        </dynamicRows>
    </fieldset>
</form>

Hope it will help !

Just copying and pasting lumps of code with no explanation is not how to answer questions. — Adam Lavery
– Adam Lavery, Commented Mar 9, 2022 at 16:29

Abdul Samad Abbasi · Accepted Answer · 2020-11-02 05:16:40Z

Try below code, obviously with your own field_names.

<fieldset name="dynamic_reviews">

<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">News Reviews</item>
<item name="collapsible" xsi:type="boolean">true</item>
<item name="sortOrder" xsi:type="number">40</item>
</item>
</argument>

<container name="dynamic_reviews_container">
<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">FME_News/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 a review</item>
<item name="deleteProperty" xsi:type="boolean">false</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">Add a review</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="reviews_id" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">allnews</item>
</item>
</argument>
<settings>
<dataType>text</dataType>
<visible>false</visible>
<dataScope>reviews_id</dataScope>
</settings>
</field>
<field name="reviews">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="additionalClasses" xsi:type="array">
<item name="admin__field-medium" xsi:type="boolean">true</item>
</item>
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Review</item>
<item name="formElement" xsi:type="string">textarea</item>
<item name="source" xsi:type="string">allnews</item>
<item name="sortOrder" xsi:type="number">25</item>
<item name="dataScope" xsi:type="string">reviews</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>

<field name="reviews_by">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="additionalClasses" xsi:type="array">
<item name="admin__field-small" xsi:type="boolean">true</item>
</item>
<item name="dataType" xsi:type="string">text</item>
<!-- <item name="readonly" xsi:type="boolean">true</item> -->
<item name="label" xsi:type="string" translate="true">Author</item>
<item name="formElement" xsi:type="string">textarea</item>
<item name="source" xsi:type="string">allnews</item>
<item name="sortOrder" xsi:type="number">30</item>
<item name="dataScope" xsi:type="string">reviews_by</item>
<!-- <item name="disabled" xsi:type="boolean">true</item> -->
<!-- <item name="default" xsi:type="string">admin</item> -->
</item>
</argument>
</field>

<field name="create_date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="additionalClasses" xsi:type="array">
<item name="admin__field-small" xsi:type="boolean">true</item>
</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="label" xsi:type="string" translate="true"></item>
<item name="sortOrder" xsi:type="number">34</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>

<field name="review_status">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">boolean</item>
<item name="label" xsi:type="string" translate="true">Enable</item>
<item name="formElement" xsi:type="string">checkbox</item>
<item name="source" xsi:type="string">allnews</item>
<item name="sortOrder" xsi:type="number">35</item>
<item name="dataScope" xsi:type="string">review_status</item>
<item name="prefer" xsi:type="string">toggle</item>
<item name="valueMap" xsi:type="array">
<item name="true" xsi:type="number">1</item>
<item name="false" xsi:type="number">0</item>
</item>
<item name="default" xsi:type="number">0</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">50</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>

Code for Add New (Grid.html) :

<div class="admin__field-complex" if="element.addButton">

<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 text="addButtonLabel"/>
</button>
</div>


</div>

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

<div class="admin__field-control" data-role="grid-wrapper">
<div class="admin__control-table-pagination" visible="!!$data.recordData().length">
<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"
text="$label().label"
visible="$label().visible"
disable="$label().disabled"
css="setClasses($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"
disable="elem.disabled"
css="$parent.setClasses(elem)"
template="elem.template"
attr="'data-index': index"/>
<!-- /ko -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr />

Code for delete(action_delete.html) :

<button class="action-delete"
        data-bind="
            click: function(){ $parent.processingDeleteRecord($record().index, $record().recordId); },
            attr: {
                title: $parent.deleteButtonLabel
            }
        ">
    <span data-bind="text: $parent.deleteButtonLabel"></span>
</button>

Note: This code is taken from Magento 2 core files.

Just copying and pasting lumps of code with no explanation is not how to answer questions. — Adam Lavery
– Adam Lavery, Commented Mar 9, 2022 at 16:28

Stack Exchange Network

Magento 2 dynamic rows add row not working

2 Answers 2

Your Answer

Linked

Hot Network Questions

Magento 2 dynamic rows add row not working

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions