Inline Editing
Enable Inline Editing on a Grid
To enable inline editing on a grid, do the following:
- Go to the datagrid yml
- Add the following lines into the datagrid configuration
1 2 3 4 5 6 7 8 | datagrids:
{grid-uid}:
# <grid configuration> goes here
inline_editing:
enable: true
save_api_accessor:
http_method: PATCH
route: oro_account_update
|
- Open the corresponding page, all the columns for which the frontend type supports inline editing will become editable
Datagrid Configuration Details
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | datagrids:
{grid-uid}:
inline_editing:
enable: true
acl_resource: custom_acl_resource
entity_name: Oro\Bundle\UserBundle\Entity\User
behaviour: enable_all
plugin: orodatagrid/js/app/plugins/grid/inline-editing-plugin
default_editors: orodatagrid/js/default-editors
cell_editor:
component: orodatagrid/js/app/components/cell-popup-editor-component
component_options:
{key}: {value}
save_api_accessor:
# api accessor options
{key}: {value}
|
Options name | Default value | Description |
---|---|---|
enable | false | Marks or unmarks this column as editable. The behaviour depends on main inline_editing.behaviour: enable_all - false will disable editing this cell. enable_selected - true will enable editing this cell. |
acl_resource | Enables inline editing if access granted to specified resource. By default is checked EDIT permission to specified entity | |
entity_name | Entity class name for saving data. By default it tries to get value from extended_entity_name | |
behaviour | enable_all | Specifies the way to enable the inline editing. Possible values: enable_all - (default). this will enable inline editing where possible. enable_selected - disable by default, enable only on configured cells |
plugin | orodatagrid/js/app/plugins/grid/inline-editing-plugin |
Specifies the plugin realization |
default_editors | orodatagrid/js/default-editors |
Specifies default editors for front-end types |
cell_editor | {component: 'orodatagrid/js/app/components/cell-popup-editor-component'} |
Specifies default cell_editor_component and their options |
save_api_accessor | {class: 'oroui/js/tools/api-accessor'} |
Required. Describes the way to send update request. Please see documentation for oroui/js/tools/api-accessor |
Sample usage of the save_api_accessor with full options provided
1 2 3 4 5 6 7 8 9 10 | save_api_accessor:
route: oro_opportunity_task_update # for example this route uses following mask
# to generate url /api/opportunity/{opportunity_id}/tasks/{id}
http_method: POST
headers:
Api-Secret: ANS2DFN33KASD4F6OEV7M8
default_route_parameters:
opportunity_id: 23
action: patch
query_parameter_names: [action]
|
Result of the combined options: /api/opportunity/23/tasks/{id}?action=patch
Please note that {id}
will be taken from the current row in the grid.
Column Configuration Options
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | datagrids:
{grid-uid}:
# <grid configuration> goes here
columns:
{column-name}:
inline_editing:
enable: true
save_api_accessor:
# see main save_api_accessor, additonally supports field_name option
# which allows to override field name that sent to server
# {<field_name>: <new_value>}
editor:
component: my-bundle/js/app/components/cell-editor-component
component_options:
{key}: {value}
view: my-bundle/js/app/views/my-cell-editor-view
view_options:
{key}: {value}
autocomplete_api_accessor:
# configure autocomplete api accessor
# for example
# class: oroui/js/tools/search-api-accessor
|
Options name | Default value | Description |
---|---|---|
enable | Marks or unmarks this column as editable. The behaviour depends on main inline_editing.behaviour: enable_all - false will disable editing this cell. enable_selected - true will enable editing this cell. |
|
save_api_accessor | Allows to override default api accessor for the whole grid. Please see documentation for oroui/js/tools/api-accessor for details | |
editor.component | Allows to override component used to display view and specified in datagrid.{grid-uid}.inline_editing.cell_editor.component |
|
editor.component_options | {} | Specifies options to pass into the cell editor component |
editor.view | Defines view that used to render cell-editor. By default, this view is selected using datagrid.{grid-uid}.inline_editing.default_editors file. |
|
editor.view_options | {} | Specifies options to pass into the cell editor view |
autocomplete_api_accessor | Allow use autocomplete to fill select2 edit form |
Frontend Special Types
frontend_type: select - simple choice from provided values
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | datagrids:
{grid-uid}:
# <grid configuration> goes here
columns:
{column-name}:
frontend_type: select
inline_editing:
enable: true
editor:
view: oroform/js/app/views/editor/select-editor-view
autocomplete_api_accessor:
class: oroui/js/tools/search-api-accessor
choices: # can be used service as data provider @service->getDataMethod
{key}: {value}
|
frontend_type: multi-select - simple choice from provided values allow choose few values
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | datagrids:
{grid-uid}:
# <grid configuration> goes here
columns:
{column-name}:
frontend_type: multi-select
inline_editing:
enable: true
editor:
view: oroform/js/app/views/editor/multi-select-editor-view
autocomplete_api_accessor:
class: oroui/js/tools/search-api-accessor
choices: # can be used service as data provider @service->getDataMethod
{key}: {value}
|
frontend_type: relation - select2 type with autocomplete search function
Example:
1 2 3 4 5 6 7 8 9 10 11 12 | datagrids:
{grid-uid}:
# <grid configuration> goes here
columns:
{column-name}:
frontend_type: relation
inline_editing:
enable: true
editor:
view: oroform/js/app/views/editor/related-id-relation-editor-view
autocomplete_api_accessor:
class: oroui/js/tools/search-api-accessor
|
frontend_type: multi-relation - select2 type with autocomplete search function and allow multiple choices
Example:
1 2 3 4 5 6 7 8 9 10 11 12 | datagrids:
{grid-uid}:
# <grid configuration> goes here
columns:
{column-name}:
frontend_type: multi-relation
inline_editing:
enable: true
editor:
view: oroform/js/app/views/editor/multi-relation-editor-view
autocomplete_api_accessor:
class: oroui/js/tools/search-api-accessor
|
Mapping Default Frontend Type and Editor
Frontend type | Editor view |
---|---|
string | text-editor-view |
phone | text-editor-view |
datetime | datetime-editor-view |
date | date-editor-view |
currency | number-editor-view |
number | number-editor-view |
integer | number-editor-view |
decimal | number-editor-view |
percent | percent-editor-view |
select | select-editor-view |
multi-select | multi-select-editor-view |
relation | relation-editor-view |
multi-relation | multi-relation-editor-view |
Taken from default-editors.
Supported Editors
Editor | Description |
---|---|
text-editor-view | Editing text/phone cells |
number-editor-view | Editing number/integer/decimal/currency cells |
percent-editor-view | Editing percent cells |
date-editor-view | Editing date cells |
datetime-editor-view | Editing datetime cells |
select-editor-view | Editing select cells (predefined choices) |
related-id-select-editor-view | Editing cells which already contain label (and no value) using predefined choices |
related-id-relation-editor-view | Editing cells which already contain label (and no value) using search api |
multi-relation-editor-view | Editing cells with specific format, for many to one relations |
multi-select-editor-view | Editing cells with specific format, for multiselect field |