Adobe Commerce 2.3 reached end of support in September 2022.

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