diff --git a/src/_data/toc/ui-components-guide.yml b/src/_data/toc/ui-components-guide.yml index 56c01f4dce3..8967d3cf53c 100644 --- a/src/_data/toc/ui-components-guide.yml +++ b/src/_data/toc/ui-components-guide.yml @@ -38,6 +38,10 @@ pages: - label: Columns component url: /ui_comp_guide/components/ui-columns.html + - label: ColumnsEditor component + url: /ui_comp_guide/components/ui-columns-editor.html + exclude_versions: ["2.2"] + - label: ColumnsEditingBulk component url: /ui_comp_guide/components/ui-columns-editing-bulk.html exclude_versions: ["2.2"] diff --git a/src/common/images/ui_comps/ui-columns-editor-result.png b/src/common/images/ui_comps/ui-columns-editor-result.png new file mode 100644 index 00000000000..24a7d52ea74 Binary files /dev/null and b/src/common/images/ui_comps/ui-columns-editor-result.png differ diff --git a/src/guides/v2.3/ui_comp_guide/components/ui-columns-editor.md b/src/guides/v2.3/ui_comp_guide/components/ui-columns-editor.md new file mode 100644 index 00000000000..fda183afbc4 --- /dev/null +++ b/src/guides/v2.3/ui_comp_guide/components/ui-columns-editor.md @@ -0,0 +1,87 @@ +--- +group: ui-components-guide +title: ColumnsEditor component +contributor_name: Atwix +contributor_link: https://www.atwix.com/ +--- + +The ColumnsEditor [UI component](https://glossary.magento.com/ui-component) is an [extension](https://glossary.magento.com/extension) for the [Columns]({{ page.baseurl }}/ui_comp_guide/components/ui-columns.html) component, allowing users to select and edit grid records data. + +## Configuration options + +| Option | Description | Type | Default Value | +| --- | --- | --- | --- | +| `bulkConfig` | Configurations for the [bulk]({{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/Ui/view/base/web/js/grid/editing/bulk.js) component. | Object | `{component: 'Magento_Ui/js/grid/editing/bulk',name: '${ $.name }_bulk',editorProvider: '${ $.name }',columnsProvider: '${ $.columnsProvider }'}` | +| `bulkEnabled` | Enable bulk editing component. | Boolean | `true` | +| `clientConfig` | Configurations for the [client]({{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/Ui/view/base/web/js/grid/editing/client.js) component. | Object | `{component: 'Magento_Ui/js/grid/editing/client',name: '${ $.name }_client'}` | +| `headerButtonsTmpl` | Path to the `.html` template for the header buttons. | String | `'ui/grid/editing/header-buttons'` | +| `multiEditingButtons` | Enable multi editing buttons. | Boolean | `true` | +| `rowButtonsTmpl` | Path to the `.html` template for the row buttons. | String | `'ui/grid/editing/row-buttons'` | +| `successMsg` | The success message which appear when the records data successfully saved. | String | `$t('You have successfully saved your edits.')` | +| `templates`.`record` | Configurations for the [record]({{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/Ui/view/base/web/js/grid/editing/record.js) component. | Object | `{parent: '${ $.$data.editor.name }',name: '${ $.$data.recordId }',component: 'Magento_Ui/js/grid/editing/record',columnsProvider: '${ $.$data.editor.columnsProvider }',editorProvider: '${ $.$data.editor.name }',preserveFields: {'${ $.$data.editor.indexField }': true}}` | +| `viewConfig` | Configurations for the [EditorView]({{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/Ui/view/base/web/js/grid/editing/editor-view.js) component. | Object | `{component: 'Magento_Ui/js/grid/editing/editor-view',name: '${ $.name }_view',model: '${ $.name }',columnsProvider: '${ $.columnsProvider }'}` | + +## Sources files + +Extends [`uiCollection`]({{ page.baseurl }}/ui_comp_guide/concepts/ui_comp_uicollection_concept.html): + +- [app/code/Magento/Ui/view/base/web/js/grid/editing/editor.js]({{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/Ui/view/base/web/js/dynamic-rows/dnd.js) + +## Examples + +### Integrate the ColumnsEditor component with the Columns component + +This is an example of how the ColumnsEditor component integrates with the [Columns]({{ page.baseurl }}/ui_comp_guide/components/ui-columns.html) component: + +```xml +