Important

You are browsing the documentation for version 4.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Security Support ends in January 2023. Read version 5.0 (the latest LTS version) of the Oro documentation to get the updated information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

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