Pre-Edit Validation

Summary

AdapTable allows developers to specify which columns / cells in AG Grid are editable and which are read-only
Both editable and read-only cells can be specifically styled for easy identification

AdapTable provides Pre-Edit validation - which prevents cells from being validated which are read-only.

Note

Read-only & Editable cell evaluation is performed on the current cell value, ie. before any cell editing happens
This is different to Client Validation and Server Validation which both evaluate on the proposed new cell value

AdapTable fully respects as Read-only any Column Definitions configured with editable as false in AG Grid GridOptions (including if editability is set via a function).

But sometimes a more granular or dynamic approach is required, where the editability of each cell in the same column is dependent on its value (or other data in the same row).

Hint

Although AdapTable respects editablity set in an AG Grid column definition, we advise using the function below instead

Setting Editable Cells

The isCellEditable function in Edit Options enables editability evaluation to be made on a per-cell basis.

isCellEditable

Function which sets if a cell is editable

Function which sets whether any given Cell in AG Grid is editable or read-only.

If this function is provided AdapTable will invoke it before editing is allowed to happen.

Caution

The isCellEditable() function guards only against any user (i.e. UI) driven edits;
Programmatic edits (e.g. via 'ticking' data) are still possible

The function is defined as follows:

isCellEditable?: (cellEditableContext: CellEditableContext) => boolean;

The CellEditableContext object is defined as follows:

Property	Description
defaultColDefEditableValue	Default editability according to the AG Grid Column Definition (`ColDef.editable`)
gridCell	Cell being edited
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

As can be seen it includes a very useful defaultColDefEditableValue property. This allows you to return the default editability for the Cell (using the ColDef.editable property in AG Grid GridOptions)

The GridCell object provides full details of the current cell, column and AG Row Node:

Property	Description
column	Column in which Cell is situated
displayValue	Display value of Cell (e.g. if formatted)
isPivotCell	Is Cell in a Pivot Column
isRowGroupCell	Is Cell in a Row Group Column
normalisedValue	Normalised value of Cell
primaryKeyValue	Primary Key column's value in row - how Adaptable locates the Cell
rawValue	Raw value of Cell
rowNode	AG Grid Row Node that holds the Cell
visible	Is Cell in a currently filtered Row

editOptions: {
  isCellEditable: (context: CellEditableContext) => {
    // Only Github Stars under 1000 are editable
    if (context.gridCell.column.columnId == 'github_stars') {
      return context.gridCell.rawValue < 1000;
    }
    // Only TypeScript and JavaScript languages are editable
    if (context.gridCell.column.columnId == 'language') {
      return (
        context.gridCell.displayValue === 'JavaScript' ||
        context.gridCell.displayValue === 'TypeScript'
      );
    }
    // for all other Columns and Cells return column default editability
    return context.defaultColDefEditableValue;
  },
},

Caution

This takes precedence over the colDef.editable property in GridOptions

Find Out More

See the Developer Tutorial on Setting Cell Editability for more details on how AdapTable evaluates cell editability

Styling Editable / ReadOnly Cells

When using the isCellEditable function, you might wish also to visually indicate to your users which Cells in AG Grid are editable.

Use the editableCellStyle and readOnlyCellStyle functions in User Interface Options to achieve this.

Find Out More

See Styling Editable & ReadOnly Cells for more information and accompanying examples

Editable Cells

Fork Fork

This example contains 3 Read-Only cell Rules - set using isCellEditable property in Edit Options:
- No cell in any row where Language cell value is HTML is editable
- GitHub Stars is not editable for cells with a value over 20,000
- Name column is not editable where Issue Change is negative
Additionally a readOnlyCellStyle of a brown border with a radius has been set in User Interface Options to enable non-editable cells to be readily identified

Expand to see the Adaptable Options code

The Cell Editable Rules are created in Edit Options:

editOptions: {
  isCellEditable: (cellEditableContext: CellEditableContext) => {
    const gridCell: GridCell = cellEditableContext.gridCell;
    if (!gridCell || !gridCell.column) {
      console.log('no grid cell...');
      return true;
    }
    // No row where 'Language' is 'HTML'
    if (gridCell.rowNode.data['language'] == 'HTML') {
      return false;
    }

    // Github Watchers not editable if > 1000
    if (gridCell.column.columnId == 'github_stars') {
      if (gridCell.rawValue > 1000) {
        return false;
      }
    }

    // Licence not editable where Issue Change is negative
    if (
      gridCell.rowNode.data['week_issue_change'] <= 0 &&
      gridCell.column.columnId == 'license'
    ) {
      return false;
    }
    return true;
  },
},

And the style is created in User Interface Options:

userInterfaceOptions: {
  readOnlyCellStyle: {
    BorderColor: 'Brown',
  },
},

PreviousData Validation NextClient Validation