Edit in GitHubLog an issue
Thanks to Atwix for contributing this topic!

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.

Options

OptionDescriptionTypeDefault 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

Integration

This is an example of how the ColumnsEditorView component integrates with the ColumnsEditor component:

Copied to your clipboard
<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

  • Privacy
  • Terms of Use
  • Do not sell or share my personal information
  • AdChoices
Copyright © 2024 Adobe. All rights reserved.