ReoGrid ReoGrid Web
form protection placeholder keyboard lite v1.6

Form Mode

A protected sheet used as a fill-in form: locked layout, one-click editing, placeholder hints, and Enter/Tab walking the input cells — list validation opens from the keyboard too.

How it works

A business app often uses a spreadsheet as a form, not as a spreadsheet: the layout is fixed, most cells are protected, and the user only fills values into a handful of boxes. v1.6.0 covers that shape with four worksheet switches. This demo is an application form — click a box once and type; Enter carries you to the end. Available in both editions.

  • ws.clickToEdit — a single click opens the editor with the caret at the end, and the pointer shows an I-beam over editable cells. Protected cells and checkbox-style cell types are unaffected
  • ws.formNavigation — Enter and Tab commit and move to the next input cell (Shift reverses), using a reading-order scan that skips protected cells, hidden lines and merge interiors, and wraps at the end of a row
  • ws.layoutLocked — header drag-resize, double-click auto-fit and whole-line reorder are all off. Sizing from the API still works, so your template code is unaffected
  • setCellPlaceholder() draws the grey hints. They appear only while the cell is empty and are never part of the value — not in PDF, print, xlsx or JSON
  • On ご希望プラン, press while editing or Alt+↓ while selected to open the list from the keyboard; the list opens at the current value, so ↓ then Enter is a two-keystroke pick
  • “Custom tab order” installs a setFormNavigator() that skips the optional Notes field — returning null stops at the end of the form
  • None of these switches is persisted, so re-apply them after loadJson() or reset()

Key APIs used

ws.clickToEdit = true

A single click opens the editor, caret at the end, with an I-beam cursor over editable cells

ws.formNavigation = true

Enter / Tab commit and move to the next input cell in reading order; Shift reverses

ws.layoutLocked = true

Stop header drag-resize, double-click auto-fit and line reorder; API sizing still works

ws.setCellPlaceholder(r, c, text)

Hint text drawn only while the cell is empty — never in the value, PDF, print, xlsx or JSON

ws.setFormNavigator(fn)

A host-defined tab order; return null to stop at the end of the form, or null the fn to restore the scan

ws.range('C4').setLock('unlocked')

With ws.protected = true, this is what makes a cell an input cell

Source Code

TypeScript

Related Documentation

Related Demos

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.