Editing in Adaptable

AdapTable provides a wealth of editing features to enable fast and safe data entry.

Modules

There are a number of different editing related Modules in AdapTable:

ModuleDescription
Smart EditEdits groups of numeric cells using mathematical operations (e.g. Multiply by 10)
Bulk UpdateUpdates multiple cell simultaneously with a new or existing value
ShortcutRules how numeric cells update when keys are pressed (to avoid 'fat fingers')
Plus MinusConfigures how a cell value will edit when the + or - keys are pressed
Change HistoryDisplays a list of recent Cell Edits and Ticking Data changes with option to undo

Edit Options

The Edit Options section of Adaptable Options allows users to edit AdapTable according to their precise requirements:

PropertyDescriptionDefault
displayServerValidationMessagesDisplays message after Server Validation; if true, Info Message appears with ValidationMessage sent by ServerValidation; if there is no Validation Message then no popup is displayedtrue
isCellEditableFunction which returns true if given cell is editable
validateOnServerFunction to validate on Server Adaptable data edits

Server Validation

One important feature provided by Edit Options is the ability to provide Server Validation.

This is done through the validateOnServer custom function.

note

See the Server Functionality Guide for in-depth information on this useful feature.

Read-Only Cells

Columns can be marked as ReadOnly in AG Grid GridOptions (set 'editable' to false) which AdapTable respects.

But sometimes a more granular or dynamic approach is required, where different cells in the same column are editable or not depending on their values or other data in the same row.

This is the purpose of the isCellEditable function which allows a decision to be made on a cell by cell basis.

It has the following signature:

isCellEditable?: (gridCell: GridCell, rowNode: RowNode) => boolean;
  • The Grid Cell object provides full details of the current cell (display & raw value and primary key)
  • The rowNode property is the Row Node object of the underlying vendor grid.
editOptions = {
isCellEditable: (gridCell: GridCell, node: RowNode) => {
// No row where Ship Via is Federal Shipping is editable
if (node.data['ShipVia'] == 'United Package') {
return false;
}
// Item Count not editable if > 7
if (gridCell.columnId == 'ItemCount') {
if (gridCell.rawValue > 7) {
return false;
}
}
// Order Cost & Package Cost not editable where Order Change is negative
if (
node.data['ChangeLastOrder'] <= 0 &&
(gridCell.columnId == 'OrderCost' || gridCell.columnId == 'PackageCost')
) {
return false;
}
return true;
},
};

This example contains 3 Read-Only cell 'rules' :

  • No row where Ship Via cell value is 'Federal Shipping' is editable - this uses the rowNode property
  • Item Count column is not editable for cells with a value over 7 - this uses the Grid Cell object
  • Order Cost and Package Cost columns are not editable where Order Change is negative

Editing Events

There are 3 editing related Events in AdapTable.

Cell Changed

An Event which fires whenever a cell changes in the Grid - whether as a result of a user cell edit or ticking data.

The Event contains a CellChangedInfo object defined as follows:

PropertyDescription
cellChangeObject providing full information of the cell (and column and row) that changed

This itself wraps a DataChangedInfo that is defined as follows:

PropertyDescription
changedAtTimestamp of change occurence (in milliseconds)
columnColumn in which cell is situated
newValueNew value for the cell
oldValueValue in the Cell before the edit
primaryKeyValuePrimary Key Column's value for the row where edited cell is situated
rowDataData in the Row
rowNodeRowNode that contains the cell (an AG Grid object)
triggerWhat triggered the change - user, background change or a reverted change?
tip

An alternative way to listen to cell data changes is to use the Data Change History Module

Grid Data Changed

An Event which fires whenever the rows collection is changed in the Grid's Data Source.

caution

The event is ONLY fired if the Data Source is changed via the addGridData, updateGridData or deleteGridData methods in Grid Api section of Adaptable API.

The Event contains a GridDataChangedInfo object which includes a list of the rows that have been effected, and a rowTrigger which specifies why the event was fired:

PropertyDescription
dataRowsRows that have been added, updated, or deleted
rowTiggerTrigger for row change: 'Add', 'Edit' or 'Delete'

Live Data Changed

This Event fires when any LiveData is being used by AdapTable (i.e. a report is being sent to Excel via Glue42 or OpenFin, or data is being sent to ipushpull).

The event also fires when a partner which uses Live Data is connected or disconnected, or a LiveReport is started, stopped or updated.

It contains a LiveDataChangedInfo object defined as follows:

PropertyDescription
liveDataTriggerWhat triggered the event to fire
liveReportThe Report which is currently live - only used if the Trigger is LiveData related
reportDestinationWhich Adaptable partner is the export destination for the live data

LiveDataTrigger

The options for the LiveDataTrigger property are:

  • Connected
  • Disconnected
  • LiveDataStarted
  • LiveDataStopped
  • LiveDataUpdated

ReportDestination

The options for the ReportDestination property are:

  • OpenFin
  • ipushpull
  • Glue42

Events Subscription

Subscribing to the Events is done the same as with all Adaptable Events:

api.eventApi.on('CellChanged', (eventInfo: CellChangedInfo) => {
// do something with the info
});
api.eventApi.on('GridDataChanged', (eventInfo: GridDataChangedInfo) => {
// do something with the info
});
adaptableApi.eventApi.on('LiveDataChanged', (eventInfo: LiveDataChangedInfo) => {
if (eventInfo.LiveDataTrigger === 'LiveDataStarted') {
// do something...
}
}
);

More Information