Cell Protection

ReoGrid Web provides sheet-level protection and cell-level locking to restrict editing.

Sheet Protection is available in the Pro edition.

Sheet protection

When sheet protection is enabled, editing of locked cells is prohibited.

const ws = grid.worksheet;

// Enable sheet protection
ws.protected = true;

// Disable sheet protection
ws.protected = false;

// Check state
console.log(ws.protected); // boolean

Cell locking

Set the lock state of individual cells. When sheet protection is enabled, locked cells cannot be edited.

// Lock a cell
ws.setCellLock(0, 0, 'locked');

// Unlock a cell
ws.setCellLock(0, 0, 'unlocked');

// Clear lock state (revert to default)
ws.clearCellLock(0, 0);

// Get lock state
const state = ws.getCellLock(0, 0);
// 'locked' | 'unlocked' | undefined

CellHandle API

ws.cell('A1').locked = 'locked';
ws.cell('A1').locked = 'unlocked';

const isProtected = ws.cell('A1').isProtected; // boolean

Range locking

// Lock a range
ws.setRangeLock(0, 0, 4, 3, 'locked');

// Unlock a range
ws.setRangeLock(0, 0, 4, 3, 'unlocked');

// Clear range lock
ws.clearRangeLock(0, 0, 4, 3);

RangeHandle API

ws.range('A1:D5').setLock('locked');
ws.range('A1:D5').setLock('unlocked');
ws.range('A1:D5').clearLock();

Checking protection state

// Whether a cell is protected (considering both sheet protection and cell lock)
const isProtected = ws.isCellProtected(0, 0);

// Whether a range is protected
const rangeProtected = ws.isRangeProtected(0, 0, 4, 3);

Event on protected cell edit attempt

You can receive a notification when an attempt is made to edit a protected cell.

ws.onProtectedCellEdit(({ row, column }) => {
  alert(`Cell (row ${row + 1}, column ${column + 1}) is protected.`);
});

Integration with ActionManager

Protection checks also apply to operations performed through the ActionManager.

import { SetCellInputAction } from '@reogrid/lite';

const success = grid.actionManager.execute(
  new SetCellInputAction(grid.worksheet, 0, 0, 'new value')
);
// If success === false, the operation was rejected due to protection

Usage example: Input form

Protect header and formula cells, leaving only input fields editable.

const ws = grid.worksheet;

ws.suspendRender();

// Set header row
ws.cell('A1').setValue('Product Name').setStyle({ bold: true });
ws.cell('B1').setValue('Quantity').setStyle({ bold: true });
ws.cell('C1').setValue('Unit Price').setStyle({ bold: true });
ws.cell('D1').setValue('Amount').setStyle({ bold: true });

// Amount column uses formulas (not editable)
for (let r = 1; r <= 5; r++) {
  ws.cell(`D${r + 1}`).value = `=B${r + 1}*C${r + 1}`;
}

// Lock header and amount column
ws.range('A1:D1').setLock('locked');
ws.range('D2:D6').setLock('locked');

// Unlock input fields
ws.range('A2:C6').setLock('unlocked');

// Enable sheet protection
ws.protected = true;

ws.resumeRender();

Notes

• When sheet protection is disabled (ws.protected = false), cell lock settings are ignored and all cells are editable.
• By default, cells are not locked (when getCellLock() returns undefined, the cell is not protected).