ReoGrid ReoGrid Web

Dropdown with Data Validation

Attach an Excel-style validation rule (ε…₯εŠ›θ¦ε‰‡) to a range. A list rule auto-renders a dropdown β€” no separate cell type needed β€” and other rule types reject out-of-range input. Introduced in v1.4.

Pro only. setValidation requires a valid licenseKey. Reads (getValidations, validate) work in Lite, so Pro-authored rules still enforce in a Lite viewer.

A dropdown from an explicit list

import { createReogrid } from '@reogrid/pro';

const grid = createReogrid('#grid', { licenseKey: 'YOUR-LICENSE-KEY' });
const ws = grid.worksheet;

ws.range('B2:B100').setValidation({
  type: 'list',
  options: ['Draft', 'In review', 'Done'],
  showInputMessage: true,
  inputTitle: 'Status',
  inputMessage: 'Pick a status from the dropdown.',
});

Each cell in the range now shows a dropdown arrow and only accepts one of the listed values.

A dropdown backed by a range

Use a same-sheet source range or formula instead of inline options (the two are mutually exclusive) β€” handy when the choices live in a lookup column:

ws.range('A2:A100').setValidation({
  type: 'list',
  source: '=$H$1:$H$5', // resolved at use
  showDropdown: true,    // render the dropdown arrow (default true)
});

Block out-of-range numbers

whole / decimal / date / time / textLength rules use an operator plus value1 (and value2 for between / notBetween). Only the stop alert style blocks the edit; warning and information are advisory:

// Whole number between 1 and 100 β€” reject anything else.
ws.range('C2:C100').setValidation({
  type: 'whole',
  operator: 'between',
  value1: 1,
  value2: 100,
  errorMessage: 'Quantity must be a whole number from 1 to 100.',
});

// Due date on or after today β€” advisory warning only.
ws.range('E2:E100').setValidation({
  type: 'date',
  operator: 'greaterThanOrEqual',
  value1: '=TODAY()',
  alertStyle: 'warning',
  errorMessage: 'The due date is in the past.',
});

Operators: between Β· notBetween Β· equal Β· notEqual Β· greaterThan Β· lessThan Β· greaterThanOrEqual Β· lessThanOrEqual.

Custom formula rule

Any formula that returns a truthy value passes. Relative references are offset from the range’s top-left:

// G2:G100 must exceed the value to its left.
ws.range('G2:G100').setValidation({
  type: 'custom',
  formula: '=G2>F2',
  errorMessage: 'Value must exceed the previous column.',
});

Read and remove

ws.getValidationAt(1, 1); // rule covering a cell, or undefined
ws.getValidations();      // all rules on the sheet
ws.validate(1, 1, 'Foo'); // test a value without writing it

ws.range('B2:B100').removeValidation();
ws.clearValidations();    // remove every rule on the sheet

Rules round-trip through xlsx <dataValidations> and ReoGrid JSON.

See also

Stay Updated

Be first to know β€” get updates as they ship

Get notified of new releases, features, and announcements.
No spam β€” just updates that matter.