Inline Edit Component
The Inline Edit component is used to provide the ability of inline editing.
Related UI Components
The Bulk Edit component uses the Inline Edit component. The Listing component can use the Inline Edit if it is configured and enabled.
Implementation of Inline Edit
Currently Inline Edit is not presented in definition.xml. It is used as a plugin for the Listing component. It can be configured in definitions.xml if necessary.
To enable Inline Edit component for the grid, it is declared as a plugin for Listing component:
The configuration of the component can include:
editorConfig - is responsible for general editor configuration
enabled - is Inline Edit enabled
selectProvider - column name, by which rows will be selected/deselected
columnsProvider - provides columns
dataProvider - provides data, which will be edited
indexField - column name, by which edited rows will be indexed
bulkConfig - in current implementation on cms_pages, includes Bulk Edit component as a plugin
clientConfig - is responsible for editor communication with backend . Contains nodes with url’s where requests for storing and validating data are sent:
viewConfig - is responsible for editor UI
templates - the templates for child components, example will be provided below and marked as *.
With configuration above, the Inline Edit will be enabled. But it also must start editing in response to some user action, for example when clicking somewhere on the row.
Note that this is not the configuration of the Inline Edit itself, but the configuration of the Column component, to interact with the Inline Edit.
With the above configuration, the Inline Edit will be enabled, but all row cells will be read-only during the Inline edit. To make specific column editable, next configuration can be used:
Or as a short alternative:
The configuration for the specific column editor can include:
editorType - type of the editor. Possible values: same as primitives (text, select, date), can also provide new type (see example marked as **)
- validation rules, required-entry here as just an example of possible rules
- Example of the templates configuration (fieldTmpl for the edited cell, and rowTmpl for the whole edited row)
** - Example of the editor type configuration - let’s add a colorpicker type, for example, as addition to the existed types (which extend form/element/abstract)
Inline Edit JS Component Structure
- Editor Component:
- Client Component:
- View Component:
- Record Component (used by Editor to create a record associated with a row data):
- row Template:
- row buttons Template:
- header buttons Template:
Dependencies on other components:
- columns collection
- dataProvider of the listing
- multiselect component, which provides information on selected rows.
Currently the Inline Edit component is configured on the cms pages as a plugin for the Listing, its configuration is included into Listing and Column components configuration (described in the above examples).