RowEdit
Feature

This feature allows editing of entire rows in a grid in a docked panel which by default slides out from the right.

By default, the editor is docked to the browser viewport, but it can be configured to be local to the grid.

The input fields are generated from the columns in the grid in the same way as the CellEdit, and the editor is a Panel.

By default, the editor works in batch mode. Fields are changed, and when the "Save" button is clicked (or the Enter key pressed), the record is updated with all the changes.

The editor can be configured to update the record as soon as a field is changed by setting the instantUpdate config to true.

Note that the revertOnEscape property of columns is respected, so pressing Escape will revert the field to the value of the field on focus.

Pressing Escape on a field which has not been changed will cancel the edit and close the editor.

To start editing a row, double-click a cell in the row, or press Enter or F2 when a cell is focused.

The start gesture can be configured by setting the triggerEvent config to 'cellClick' or 'cellDblClick'.

Editing can be prevented by setting the ignoreCSSSelector config to a CSS selector which matches elements that should not trigger editing.

Pressing Enter or clicking the "Save" button will save the changes and close the editor. Pressing Escape or clicking the "Cancel" button will close the editor without saving changes.

If instantUpdate is true, the record will be updated as soon as a field is changed (on blur or when changed by trigger action such as spin up or down in a number or date or time field), so Escape and the "Cancel" button revert the changes before closing the editor.

Clicking outside the editor will normally cancel the ongoing edit and start a new one on the clicked cell. This can be prevented by setting the continueEditingOnCellClick config to false.

This feature is disabled by default

Configs

Configs are options you supply in a configuration object when creating an instance of this class

editor : PanelConfig

The Panel instance used as the editor.

Has a corresponding runtime editor property.
editorSize : Number/String'30em'

The width of the editor. (Or height if side is 'top' or 'bottom').

May be specified as a number of pixels or a CSS length string.
focusContextualField : Booleantrue

By default, the editor field corresponding to the cell clicked will be focused when starting editing.

Set to false to prevent this. Focus will then go to the first field in the editor.

if autoEdit is true, starting editing by typing will always focus the contextual field in the editor.
instantUpdate : Boolean

Set to true to update the record as soon as a field is changed.
local : Booleanfalse

Configure this as true to dock the editor to the grid's element instead of the browser viewport.
revertButton : Booleanfalse

Configure this as true to show a "Revert" button in the editor which reverts any unsynced changes to the record.

This reverts all changes made since the data was loaded or synchronized with the server. This is different to just canceling an ongoing edit. This reverts the record to its loaded state.

The button is only shown when starting an edit on a record which has unsynced changes.
side : 'start'/'left'/'end'/'right'/'top'+ 1 more'end'

The side of the grid where the editor will be shown.

'start' means the inline-start side. 'end' means the inline-end side.
titleField : String

The name of the field from the record to use when generating the title for the editor.

The default implementation returns "Editing " plus the value of the named field from the editing record.
titleRenderer : Function
A function (or the name of a function) which will be called passing the editing record to generate the title for the editor.

You should never modify any records inside this method.

The default implementation returns "Editing " (localized according to the current locale) plus the value of the field specified in titleField.

This may be configured if a more sophisticated title is required.
Parameters
- record : Model
  
  The record being edited
Returns

String
:

The title for the editor

Properties

Properties are getters/setters or publicly accessible variables on this class

isRowEdit : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of RowEdit class, or subclass thereof.

editor : PanelConfig

The Panel instance used as the editor.

Has a corresponding editor config.
isRowEdit : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of RowEdit class, or subclass thereof.

Functions

Functions are methods available for calling on the class

finishEditing( )
: Promise

ASYNC

ON-OWNER

Finish editing, update the underlying record and hide the editor. This function is exposed on Grid and can thus be called as grid.finishEditing(...)

Triggers: beforeFinishRowEdit, finishRowEdit
cancelEditing( isStartingfalse )
: Boolean

ON-OWNER

Cancel editing, hides the editor. This function is exposed on Grid and can thus be called as grid.cancelEditing(...)

Triggers: beforeCancelRowEdit
startEditing( cellContext, isAutoEdit )
: Promise

ASYNC

ON-OWNER

Start editing specified row. If no cellContext is given it edits the first visible row. This function is exposed on Grid and can thus be called as grid.startEditing(...).

Triggers: beforeStartRowEdit, startRowEdit
onElementClick( )
: Promise

private

ASYNC

Finish editing if clicking below rows (only applies when grid is higher than rows). Also finish if event target is the subgrid which can happen if the pointer is moved during mouse down.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

beforeCancelRowEdit

ASYNC

PREVENTABLE

ON-OWNER

Fires on the owning Grid before the row editing is canceled, return false to signal that the value is invalid and editing should not be finalized.

Note that if instantUpdate is true, the record will be reset to initial values on cancel of editing.

Note that this event is triggered on the owning widget:
beforeFinishRowEdit

ASYNC

PREVENTABLE

ON-OWNER

Fires on the owning Grid before the row editing is finished, return false to signal that the value is invalid and editing should not be finalized.

Note that if instantUpdate is true, the record will be updated as soon as a field is changed, so this event would not prevent the record from being updated, only the editor being hidden.

Note that this event is triggered on the owning widget:
beforeStartRowEdit

PREVENTABLE

ON-OWNER

Fires on the owning Grid before editing starts, return false to prevent editing

Note that this event is triggered on the owning widget:
finishRowEdit

ASYNC

PREVENTABLE

ON-OWNER

Fires on the owning Grid before the row editing is finished, return false to signal that the value is invalid and editing should not be finalized.

Note that if instantUpdate is true, the record will be updated as soon as a field is changed, so this event would not prevent the record from being updated, only the editor being hidden.

Note that this event is triggered on the owning widget:
startRowEdit

ON-OWNER

Fires on the owning Grid when editing starts

Note that this event is triggered on the owning widget:

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onBeforeCancelRowEdit

ASYNC

PREVENTABLE

ON-OWNER

Called on the owning Grid before the row editing is canceled, return false to signal that the value is invalid and editing should not be finalized.

Note that if instantUpdate is true, the record will be reset to initial values on cancel of editing.

Note that this handler is called on the owning widget:
onBeforeFinishRowEdit

ASYNC

PREVENTABLE

ON-OWNER

Called on the owning Grid before the row editing is finished, return false to signal that the value is invalid and editing should not be finalized.

Note that if instantUpdate is true, the record will be updated as soon as a field is changed, so this event would not prevent the record from being updated, only the editor being hidden.

Note that this handler is called on the owning widget:
onBeforeStartRowEdit

PREVENTABLE

ON-OWNER

Called on the owning Grid before editing starts, return false to prevent editing

Note that this handler is called on the owning widget:
onFinishRowEdit

ASYNC

PREVENTABLE

ON-OWNER

Called on the owning Grid before the row editing is finished, return false to signal that the value is invalid and editing should not be finalized.

Note that if instantUpdate is true, the record will be updated as soon as a field is changed, so this event would not prevent the record from being updated, only the editor being hidden.

Note that this handler is called on the owning widget:
onStartRowEdit

ON-OWNER

Called on the owning Grid when editing starts

Note that this handler is called on the owning widget:

Type definitions

RowEditorContext
Row editing context
Properties
- editor : Panel
  
  The Panel being used. Will contain an inputField property, which is the field being used to perform the editing
- column : Column
  
  Target column
- record : Model
  
  Target record
- cell : HTMLElement
  
  Target cell

id: rowEdit

Source path

Grid/feature/RowEdit.js

Demo

examples/rowedit

RowEdit
Feature

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Type definitions

Properties

Source path

Demo

Inheritance tree4

Mixins3

Contents

RowEdit Feature

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Type definitions

Properties

Source path

Demo

Inheritance tree4

Mixins3

Contents

RowEdit
Feature