0

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>
1
0

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.

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.