This page has moved and will be redirected soon. See Migrated topics for the complete list.

ColumnsEditorView component

The ColumnsEditorView UI component is an extension for the ColumnsEditor component. It provides functionality for showing the inline form for editing a selected grid record.

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/editor-view
rootSelector The CSS selector of a table parent element. String '${ $.columnsProvider }:.admin__data-grid-wrap'
tableSelector The CSS selector of a table element. String '${ $.rootSelector } -> table'
model The uiRegistry path to the ColumnsEditor component. String -
rowSelector The CSS selector of a row element. String '${ $.tableSelector } tbody tr.data-row'
headerButtonsTmpl The Knockout template for showing header buttons. String '<!-- ko template: headerButtonsTmpl --><!-- /ko -->'
bulkTmpl The Knockout template for showing the ColumnsEditingBulk component. String <!-- ko scope: bulk --><!-- ko template: getTemplate() --><!-- /ko --><!-- /ko -->
rowTmpl The Knockout template for showing ColumnsEditorRecord component. String <!-- ko with: _editor --><!-- ko if: isActive($row()._rowIndex, true) --><!-- ko with: getRecord($row()._rowIndex, true) --><!-- ko template: rowTmpl --><!-- /ko --><!-- /ko --><!-- ko if: isSingleEditing && singleEditingButtons --><!-- ko template: rowButtonsTmpl --><!-- /ko --><!-- /ko --><!-- /ko --><!-- /ko -->

Sources files

Extends uiClass:

Examples

Integrate the ColumnsEditorView component with the ColumnsEditor component

This is an example of how the ColumnsEditorView 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
<listing>
    ...
    <columns name="columns">
        <settings>
            <editorConfig>
                <param name="indexField" xsi:type="string">entity_id</param>
                <param name="enabled" xsi:type="boolean">true</param>
                <param name="selectProvider" xsi:type="string">${ $.columnsProvider }.ids</param>
                <param name="viewConfig" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/editing/record</item>
                    <item name="model" xsi:type="string">${ $.name }</item>
                    <item name="tableSelector" xsi:type="string">${ $.rootSelector } -> table</item>
                </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

ColumnsEditorView Component example