This is a beta release of documentation for Magento 2.4, published for previewing soon-to-be-released functionality. Content in this version is subject to change. Links to the v2.4 code base may not properly resolve until the code is officially released.

ActionDelete component

Overview

The ActionDelete component provides a user interface for deleting records of the DynamicRows component.

ActionDelete options

Option Description Type Default
component The path to the component’s .js file in terms of RequireJS. String Magento_Ui/js/dynamic-rows/action-delete
links.value Breaks the link established in the link property of the parent (abstract) component. Boolean false
template The path to the component’s .html template. String ui/dynamic-rows/cells/action-delete

Source files

Extends Abstract:

Examples

Integrate ActionDelete component with DynamicRows component

This is an example of how ActionDelete component integrates with DynamicRows component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<form>
    ...
    <dynamicRows name="dynamic_rows">
            <settings>
                ...
            </settings>
            <container name="record" component="Magento_Ui/js/dynamic-rows/record">
                ...
                <actionDelete template="Magento_Backend/dynamic-rows/cells/action-delete">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="fit" xsi:type="boolean">false</item>
                        </item>
                    </argument>
                    <settings>
                        <additionalClasses>
                            <class name="some-class">true</class>
                        </additionalClasses>
                        <dataType>text</dataType>
                        <label>Actions</label>
                        <componentType>actionDelete</componentType>
                    </settings>
                </actionDelete>
            </container>
        </dynamicRows>
    ...
</form>

Result

ActionDelete Component with Record Component example