Important

You are browsing the documentation for version 4.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date 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 datagrids:
2     {grid-uid}:
3         # <grid configuration> goes here
4         inline_editing:
5             enable: true
6         save_api_accessor:
7             http_method: PATCH
8             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 datagrids:
 2     {grid-uid}:
 3         inline_editing:
 4             enable: true
 5             acl_resource: custom_acl_resource
 6             entity_name: Oro\Bundle\UserBundle\Entity\User
 7             behaviour: enable_all
 8             plugin: orodatagrid/js/app/plugins/grid/inline-editing-plugin
 9             default_editors: orodatagrid/js/default-editors
10             cell_editor:
11                 component: orodatagrid/js/app/components/cell-popup-editor-component
12                 component_options:
13                     {key}: {value}
14             save_api_accessor:
15                 # api accessor options
16                 {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 save_api_accessor:
 2     route: oro_opportunity_task_update # for example this route uses following mask
 3         # to generate url /api/opportunity/{opportunity_id}/tasks/{id}
 4     http_method: POST
 5     headers:
 6         Api-Secret: ANS2DFN33KASD4F6OEV7M8
 7     default_route_parameters:
 8         opportunity_id: 23
 9     action: patch
10     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 datagrids:
 2     {grid-uid}:
 3         # <grid configuration> goes here
 4         columns:
 5             {column-name}:
 6                 inline_editing:
 7                     enable: true
 8                     save_api_accessor:
 9                         # see main save_api_accessor, additonally supports field_name option
10                         # which allows to override field name that sent to server
11                         # {<field_name>: <new_value>}
12                     editor:
13                         component: my-bundle/js/app/components/cell-editor-component
14                         component_options:
15                             {key}: {value}
16                         view: my-bundle/js/app/views/my-cell-editor-view
17                         view_options:
18                             {key}: {value}
19                     autocomplete_api_accessor:
20                         # configure autocomplete api accessor
21                         # for example
22                         # 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 datagrids:
 2     {grid-uid}:
 3         # <grid configuration> goes here
 4         columns:
 5             {column-name}:
 6                 frontend_type: select
 7                 inline_editing:
 8                     enable: true
 9                     editor:
10                         view: oroform/js/app/views/editor/select-editor-view
11                     autocomplete_api_accessor:
12                         class: oroui/js/tools/search-api-accessor
13                 choices: # can be used service as data provider @service->getDataMethod
14                     {key}: {value}

frontend_type: multi-select - simple choice from provided values allow choose few values

Example:

 1 datagrids:
 2     {grid-uid}:
 3         # <grid configuration> goes here
 4         columns:
 5             {column-name}:
 6                 frontend_type: multi-select
 7                 inline_editing:
 8                     enable: true
 9                     editor:
10                         view: oroform/js/app/views/editor/multi-select-editor-view
11                     autocomplete_api_accessor:
12                         class: oroui/js/tools/search-api-accessor
13                 choices: # can be used service as data provider @service->getDataMethod
14                     {key}: {value}

frontend_type: relation - select2 type with autocomplete search function

Example:

 1 datagrids:
 2     {grid-uid}:
 3         # <grid configuration> goes here
 4         columns:
 5             {column-name}:
 6                 frontend_type: relation
 7                 inline_editing:
 8                     enable: true
 9                     editor:
10                         view: oroform/js/app/views/editor/related-id-relation-editor-view
11                     autocomplete_api_accessor:
12                         class: oroui/js/tools/search-api-accessor

frontend_type: multi-relation - select2 type with autocomplete search function and allow multiple choices

Example:

 1 datagrids:
 2     {grid-uid}:
 3         # <grid configuration> goes here
 4         columns:
 5             {column-name}:
 6                 frontend_type: multi-relation
 7                 inline_editing:
 8                     enable: true
 9                     editor:
10                         view: oroform/js/app/views/editor/multi-relation-editor-view
11                     autocomplete_api_accessor:
12                         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