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>

• Msquare: Try this link magento.stackexchange.com/a/307100/82670

Answer 1

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 !

• Adam Lavery: Just copying and pasting lumps of code with no explanation is not how to answer questions.

Answer 2

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.

• Adam Lavery: Just copying and pasting lumps of code with no explanation is not how to answer questions.