PHP 7.3 reached end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in September 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

ColumnsEditorRecord component

The ColumnsEditorRecord UI component is a container of record fields. The ColumnsEditorRecord should be used as a child of the ColumnsEditor component.

Configuration options

Option Description Type Default Value
component The path to the component’s .js file, relative to RequireJS. String Magento_Ui/js/grid/editing/record
fieldTmpl The path to the component’s .html field template. String 'ui/grid/editing/field'
rowTmpl The path to the component’s .html row template. String 'ui/grid/editing/row'
templates.fields The object that contains the configurations for field types. Object {base: {...},text: {...},date: {...},select: {...}}
templates.fields.base The base configurations of a record field. Object {parent: '${ $.$data.record.name }',name: '${ $.$data.column.index }',provider: '${ $.$data.record.name }',dataScope: 'data.${ $.$data.column.index }',imports: {disabled: '${ $.$data.record.parentName }:fields.${ $.$data.column.index }.disabled'},isEditor: true}
templates.fields.date The date record field configurations. Object {component: 'Magento_Ui/js/form/element/date',template: 'ui/form/element/date',dateFormat: 'MMM d, y h:mm:ss a'}
templates.fields.select The select record field configurations. Object {component: 'Magento_Ui/js/form/element/select',template: 'ui/form/element/select',options: '${ JSON.stringify($.$data.column.options) }'}
templates.fields.text The text record field configurations. Object {component: 'Magento_Ui/js/form/element/abstract',template: 'ui/form/element/input'}

Sources files

Extends UiCollection:

Examples

Integrate the ColumnsEditorRecord component with the ColumnsEditor component

This is an example of how the ColumnsEditorRecord component integrates with the ColumnsEditor 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<listing>
    ...
    <columns name="columns">
        <settings>
            <editorConfig>
                <param name="templates" xsi:type="array">
                    <item name="record" xsi:type="array">
                        <item name="component" xsi:type="string">Magento_Ui/js/grid/editing/record</item>
                        <item name="fieldTmpl" xsi:type="string">ui/grid/editing/field</item>
                        <item name="rowTmpl" xsi:type="string">ui/grid/editing/row</item>
                    </item>
                </param>
                <param name="enabled" xsi:type="boolean">true</param>
            </editorConfig>
        </settings>
        <selectionsColumn name="ids">
            <settings>
                <indexField>entity_id</indexField>
            </settings>
        </selectionsColumn>
        <column name="entity_id">
            <settings>
                <label translate="true">ID</label>
            </settings>
        </column>
        <column name="title">
            <settings>
                <filter>text</filter>
                <editor>
                    <validation>
                        <rule name="required-entry" xsi:type="boolean">true</rule>
                    </validation>
                    <editorType>text</editorType>
                </editor>
                <label translate="true">Title</label>
            </settings>
        </column>
        <column name="is_active" component="Magento_Ui/js/grid/columns/select">
            <settings>
                <options class="Magento\Config\Model\Config\Source\Yesno"/>
                <filter>select</filter>
                <editor>
                    <editorType>select</editorType>
                </editor>
                <dataType>select</dataType>
                <label translate="true">Status</label>
            </settings>
        </column>
        ...
    </columns>
</listing>

Result

ColumnsEditorRecord Component example

Add custom field type to ColumnsEditorRecord

This is an example of how to add textarea and multi-select editor types to ColumnsEditorRecord 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<listing>
    ...
    <columns name="columns">
        <settings>
            <editorConfig>
                <param name="templates" xsi:type="array">
                    <item name="record" xsi:type="array">
                        <item name="templates" xsi:type="array">
                            <item name="fields" xsi:type="array">
                                <!-- add textarea field type -->
                                <item name="textarea" xsi:type="array">
                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/textarea</item>
                                    <item name="template" xsi:type="string">ui/form/field</item>
                                </item>
                                <!-- add multiselect field type -->
                                <item name="multiselect" xsi:type="array">
                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/multiselect</item>
                                    <item name="template" xsi:type="string">ui/form/element/multiselect</item>
                                    <item name="options" xsi:type="array">
                                        <item name="0" xsi:type="array">
                                            <item name="value" xsi:type="number">1</item>
                                            <item name="label" xsi:type="string" translate="true">Option #1</item>
                                        </item>
                                        <item name="1" xsi:type="array">
                                            <item name="value" xsi:type="number">2</item>
                                            <item name="label" xsi:type="string" translate="true">Option #2</item>
                                        </item>
                                        <item name="2" xsi:type="array">
                                            <item name="value" xsi:type="number">3</item>
                                            <item name="label" xsi:type="string" translate="true">Option #3</item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </param>
                <param name="enabled" xsi:type="boolean">true</param>
            </editorConfig>
        </settings>
        <selectionsColumn name="ids">
            <settings>
                <indexField>entity_id</indexField>
            </settings>
        </selectionsColumn>
        <column name="entity_id">
            <settings>
                <label translate="true">ID</label>
            </settings>
        </column>
        <column name="title">
            <settings>
                <filter>text</filter>
                <editor>
                    <validation>
                        <rule name="required-entry" xsi:type="boolean">true</rule>
                    </validation>
                    <editorType>textarea</editorType>
                </editor>
                <label translate="true">Textarea</label>
            </settings>
        </column>
        <column name="is_active" component="Magento_Ui/js/grid/columns/select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="options" xsi:type="array">
                        <item name="0" xsi:type="array">
                            <item name="value" xsi:type="number">1</item>
                            <item name="label" xsi:type="string" translate="true">Option #1</item>
                        </item>
                        <item name="1" xsi:type="array">
                            <item name="value" xsi:type="number">2</item>
                            <item name="label" xsi:type="string" translate="true">Option #2</item>
                        </item>
                        <item name="2" xsi:type="array">
                            <item name="value" xsi:type="number">3</item>
                            <item name="label" xsi:type="string" translate="true">Option #3</item>
                        </item>
                    </item>
                </item>
            </argument>
            <settings>
                <editor>
                    <editorType>multiselect</editorType>
                </editor>
                <dataType>select</dataType>
                <label translate="true">Multiselect</label>
            </settings>
        </column>
        ...
    </columns>
</listing>

Result

ColumnsEditorRecord Component example