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.
       * @param model - The full row model containing all column values.
       * @returns `true` if the value is valid, otherwise `false`.
       */
      validate?(cellValue?: any, model?: 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.