Validating Data in AdapTable

Summary

AdapTable provides 3 times of validation:
- pre-edit validation via ReadOnly cells
- post-edit validation on the Client via Validation Alerts
- post edit server validation

AdapTable allows users / developer to perform validation in 3 ways to cover different use cases.

Pre-editing Validation

Pre-editing validation is performed using Read-Only (or Editable) cells.

AdapTale prevents cells which meet the read-only rule from being edited, before a new value can be provided.

Note

AdapTable will evaluate whether the cell can be edited, ie. the evaluation is done on the existing cell value

Find Out More

See Pre-Edit Validation for more information

Post-editing Client Validation

AdapTable can be configured with Validation Alerts which will trigger when an Edit breaks an Alert rule.

They have a behaviour of PreventEdit which means that the data change is automatically rolled back.

Validation Alerts can be defined at design-time in Alert State, or created by run-time users.

Find Out More

See Client Validation for more information

Post-editing Server Validation

Additionally AdapTable offers Server Validation.

This is configured using properties in Edit Options.

A function is invoked which is given details of the proposed edit and is handled "externally".

The function returns a result that either allows, disallows or overrides the new cell value.

Find Out More

See Server Validation for more information

Data Validation

Fork Fork

This example shows all 3 types of validation (using the Language Column):
- Pre-editing Validation sets all cells with the value HTML to be readonly
- Client Validation prevents the value being changed to Python
- Server Validation has 2 rules; (1) it disallows the value of JQuery; (2) it changes a value of C to C#

Expand to see the Code used

Pre-editing Validation

isCellEditable: (cellEditableContext: CellEditableContext) => {
  const gridCell: GridCell = cellEditableContext.gridCell;
  if (
    gridCell &&
    gridCell.column &&
    gridCell.column.columnId === 'language'
  ) {
    return gridCell.displayValue === 'HTML' ? false : true;
  } else {
    return cellEditableContext.defaultColDefEditableValue;
  }
},

Client Data Validation

Alert: {
  AlertDefinitions: [
    {
      Name: 'alert-language',
      Scope: {
        ColumnIds: ['language'],
      },
      Rule: {
        Predicates: [
          {
            PredicateId: 'Is',
            Inputs: ['Python'],
          },
        ],
      },
      AlertProperties: {
        PreventEdit: true,
        DisplayNotification: true,
      },
      MessageType: 'Error',
      MessageText: 'You cannot change the Language to "Python"!',
    },
  ],
},

Server Data Validation

validateOnServer: (serverValidationContext: ServerValidationContext) => {
    return new Promise((resolve, reject) => {
      setTimeout(
        // mimic a server check
        () =>
          resolve(
            getServerEditResponse(serverValidationContext.cellDataChangedInfo)
          ),
        1000
      );
    });
  },

function getServerEditResponse(cellDataChangedInfo: CellDataChangedInfo): ValidationResult {
  if (cellDataChangedInfo.column.columnId == 'language') {
    if (cellDataChangedInfo.newValue == 'JQuery') {
      return {
        NewValue: cellDataChangedInfo.oldValue,
        ValidationMessage: 'Cannot provide a value of JQuery',
        ValidationHeader: 'No longer used',
        MessageType: 'Warning',
      };
    } else if (cellDataChangedInfo.newValue == 'C') {
      return {
        NewValue: 'C#',
        ValidationMessage: 'Please use C# instead of C',
        ValidationHeader: 'C is too hard!',
        MessageType: 'Info',
      };
    }
  }
  return {};
}

Try It Out

In the Language Column:
- try to change a cell with HTML and note its not allowed; change a different cell to HTML and note the new cell is now not editable
- change a cell to Python and see how it triggers a Prevent Edit Alert
- change a cell to JQuery and see how it gets reverted; set it to C and note how it gets automatically updated to C#

import {
  AdaptableOptions,
  CellDataChangedInfo,
  CellEditableContext,
  GridCell,
  ServerValidationContext,
  ServerValidationResult,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Data Validation',
  editOptions: {
    isCellEditable: (cellEditableContext: CellEditableContext) => {
      const gridCell: GridCell = cellEditableContext.gridCell;
      if (
        gridCell &&
        gridCell.column &&
        gridCell.column.columnId === 'language'
      ) {
        return gridCell.displayValue === 'HTML' ? false : true;
      } else {
        return cellEditableContext.defaultColDefEditableValue;
      }
    },
    validateOnServer: (serverValidationContext: ServerValidationContext) => {
      return new Promise((resolve, reject) => {
        setTimeout(
          // mimic a server check
          () =>
            resolve(
              getServerEditResponse(serverValidationContext.cellDataChangedInfo)
            ),
          1000
        );
      });
    },
  },

  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Demo',
          Toolbars: ['Alert'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Alert: {
      AlertDefinitions: [
        {
          Name: 'alert-language',
          Scope: {
            ColumnIds: ['language'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Is',
                Inputs: ['Python'],
              },
            ],
          },
          AlertProperties: {
            PreventEdit: true,
            DisplayNotification: true,
          },
          MessageType: 'Error',
          MessageText: 'You cannot change the Language to "Python"!',
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
  notificationsOptions: {
    position: 'TopCenter',
  },
};
function getServerEditResponse(
  cellDataChangedInfo: CellDataChangedInfo
): ServerValidationResult {
  if (cellDataChangedInfo.column.columnId == 'language') {
    if (cellDataChangedInfo.newValue == 'JQuery') {
      return {
        newCellValue: cellDataChangedInfo.oldValue,
        validationMessage: 'Cannot provide a value of JQuery',
        validationHeader: 'No longer used',
        messageType: 'Warning',
      };
    } else if (cellDataChangedInfo.newValue == 'C') {
      return {
        newCellValue: 'C#',
        validationMessage: 'Please use C# instead of C',
        validationHeader: 'C is too hard!',
        messageType: 'Info',
      };
    }
  }
  return {};
}

Validation in AdapTable

(Recorded with AdapTable v15)

PreviousTechnical Reference NextPre-Edit Validation

Framework: