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
My Ui Component Structure is
Which field did I forget to add in uicomponent.?
asked Mar 22, 2017 at 13:51
-
but it looks like you have a delete button at the end of the row– Marius ♦Mar 22, 2017 at 13:57
-
1I 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
Add a comment
|
3 Answers
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>
-
After Adding This <actionDelete>. Row Not Genrating When i Click Add New. Mar 22, 2017 at 14:05
-
1
-
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
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
-
-
@Milind Singh Please help on this. magento.stackexchange.com/questions/365116/… Mar 7 at 9:48
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 :
