Skip to content
RevoGrid [Pro]

Cell Validate

Module Extensions

ColumnRegular (Extended from @revolist/revogrid)

Add validationTooltip property to ColumnRegular interface

interface ColumnRegular {
  /**
       * Optional property to enable soft validation, when set to true, the cell will be saved if it is invalid
       */
      softValidation?: boolean;
  /**
       * Optional function to provide tooltip text for invalid cells.
       * @param cellValue - The value of the cell.
       * @returns The tooltip text for the cell.
       */
      validationTooltip?(cellValue?: any): any;
  /**
       * Optional function to validate the cell value.
       * @param cellValue - The value of the cell.
       * @returns `true` if the value is valid, otherwise `false`.
       */
      validate?(cellValue?: any): boolean
}

Plugin API

CellValidatePlugin

The CellValidatePlugin is a RevoGrid plugin designed to enforce cell validation within the grid, ensuring data integrity by preventing invalid data entries from being saved. It integrates seamlessly with RevoGrid’s event system and requires the EventManagerPlugin for full functionality.

Features:

  • Listens to grid edit events (ON_EDIT_EVENT) to validate cell data upon modification. If a cell is deemed invalid based on the column’s validation logic, it prevents the data from being saved and refreshes the grid.
  • Adds visual indicators to invalid cells by tagging them during the BEFORE_CELL_RENDER_EVENT, providing immediate feedback to users about validation errors.
  • Integrates custom validation logic through column definitions, supporting both strict and soft validation modes.
  • Utilizes validationRenderer for rendering cells with validation feedback, allowing customization of how invalid cells are displayed using tooltips or other UI elements.

Usage:

  • Implement this plugin in a RevoGrid instance to enable cell validation logic and improve data quality by preventing erroneous entries.

Example

import { CellValidatePlugin } from '@revolist/revogrid-pro'


const grid = document.createElement('revo-grid');
grid.plugins = [CellValidatePlugin];
class CellValidatePlugin {}

invalidCellProps

export function invalidCellProps(invalid = false);

validationRenderer

Extends the ColumnRegular interface from the RevoGrid framework to include properties and functions for validating cell data and rendering validation feedback. It facilitates cell validation and provides visual indicators for invalid cells.

Features:

  • Extends ColumnRegular with:
    • softValidation: An optional boolean indicating if a cell should be saved even when invalid.
    • validationTooltip: A function to provide tooltip text for invalid cells.
    • validate: A function to determine if a cell’s value is valid.
  • The invalidCellProps function returns cell properties indicating whether a cell is invalid.
  • The validationRenderer function returns a renderer with:
    • cellProperties: Adds validation styles and properties to cells, highlighting them when invalid.
    • cellTemplate: Renders cells with a red triangle and tooltip if the value is invalid, providing visual feedback.

Usage:

  • Integrate these extensions into the RevoGrid column configuration to enable cell validation.
  • Customize cell templates and properties using validationRenderer to enhance the grid’s UI.

Example

import { validationRenderer } from '@revolist/revogrid-pro'


const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'num',
    name: 'Linear',
    validate: (value) => value >= 0 && value <= 40,
    validationTooltip: (value) => `Value ${value} is out of range`,
    cellTemplate: validationRenderer().cellTemplate,
  },
];

This module is crucial for applications requiring data validation, improving user experience by providing immediate feedback for data entry errors within the RevoGrid framework.

validationRenderer: ({ template, invalidProperties, }?: { template?: CellTemplate | undefined; invalidProperties?: PropertiesFunc | undefined; }) => Pick<Required<ColumnRegular>, "cellTemplate" | "cellProperties">;

validateNumber

Validates if the value is a number.

@param value - The value to validate. * @returns true if the value is a number, otherwise false.

export function validateNumber(value: any): boolean;

validateBoolean

Validates if the value is a boolean.

@param value - The value to validate. * @returns true if the value is a boolean, otherwise false.

export function validateBoolean(value: any): boolean;

validateString

Validates if the value is a string.

@param value - The value to validate. * @returns true if the value is a string, otherwise false.

export function validateString(value: any): boolean;

validateInteger

Validates if the value is an integer.

@param value - The value to validate. * @returns true if the value is an integer, otherwise false.

export function validateInteger(value: any): boolean;

validateDecimal

Validates if the value is a decimal.

@param value - The value to validate. * @returns true if the value is a decimal, otherwise false.

export function validateDecimal(value: any): boolean;

validateRange

Validates if the value is within a specific range.

@param value - The value to validate. * @param min - The minimum value. * @param max - The maximum value. * @returns true if the value is within the range, otherwise false.

export function validateRange(value: any, min: number, max: number): boolean;

validateArray

Validates if the value is an array.

@param value - The value to validate. * @returns true if the value is an array, otherwise false.

export function validateArray(value: any): boolean;

validateObject

Validates if the value is an object.

@param value - The value to validate. * @returns true if the value is an object, otherwise false.

export function validateObject(value: any): boolean;

validateNull

Validates if the value is null.

@param value - The value to validate. * @returns true if the value is null, otherwise false.

export function validateNull(value: any): boolean;

validateUndefined

Validates if the value is undefined.

@param value - The value to validate. * @returns true if the value is undefined, otherwise false.

export function validateUndefined(value: any): boolean;

validateDate

Validates if the value is a date.

@param value - The value to validate. * @returns true if the value is a date, otherwise false.

export function validateDate(value: any): boolean;

validateRegex

Validates if the value matches the provided regular expression.

@param value - The value to validate. * @param regex - The regular expression to test against. * @returns true if the value matches the regular expression, otherwise false.

export function validateRegex(value: any, regex: RegExp): boolean;

validateEnum

Validates if the value is one of the allowed values.

@param value - The value to validate. * @param allowedValues - The array of allowed values. * @returns true if the value is one of the allowed values, otherwise false.

export function validateEnum(value: any, allowedValues: any[]): boolean;

validatePositive

Validates if the value is a positive number.

@param value - The value to validate. * @returns true if the value is a positive number, otherwise false.

export function validatePositive(value: any): boolean;

validateNegative

Validates if the value is a negative number.

@param value - The value to validate. * @returns true if the value is a negative number, otherwise false.

export function validateNegative(value: any): boolean;

validateFinite

Validates if the value is a finite number.

@param value - The value to validate. * @returns true if the value is a finite number, otherwise false.

export function validateFinite(value: any): boolean;

validateEmptyString

Validates if the value is an empty string.

@param value - The value to validate. * @returns true if the value is an empty string, otherwise false.

export function validateEmptyString(value: any): boolean;

validateNonEmptyString

Validates if the value is a non-empty string.

@param value - The value to validate. * @returns true if the value is a non-empty string, otherwise false.

export function validateNonEmptyString(value: any): boolean;

validateInstance

Validates if the value is an instance of a class.

@param value - The value to validate. * @param cls - The class to test against. * @returns true if the value is an instance of the class, otherwise false.

export function validateInstance(value: any, cls: any): boolean;

parseBoolean

Utilities used in the RevoGrid project to assist in converting various data types to a boolean value. This function is essential for data processing tasks where boolean values may be represented in different formats.

Features:

  • Accepts inputs of type boolean, number, or string, and attempts to convert them to a boolean value.
  • For numbers, returns true if the value is 1, otherwise false.
  • For strings, it normalizes the input to lowercase and trims whitespace, returning true for common affirmative representations (‘true’, ‘yes’, ‘1’) and false for negative representations (‘false’, ‘no’, ‘0’).
  • Returns undefined if the input cannot be reliably converted to a boolean, allowing for error handling or default value assignment in calling code.

Usage:

  • Call parseBoolean when you need a flexible utility to standardize various input representations into a boolean format, particularly useful in grid configuration or data validation scenarios.

Example

const isEnabled = parseBoolean('yes'); // Returns true
const isDisabled = parseBoolean(0); // Returns false
export function parseBoolean(value: any): boolean | undefined;