Skip to content
ZenGrid

Large Text Editor

Community

Introduction

Section titled “Introduction”

The Large Text Editor is ZenGrid’s built-in editor for long, multi-line values — notes, descriptions, addresses, bios. Where the single-line Text Editor clips content and treats Enter as commit, the large-text editor opens a floating <textarea> panel over the cell so you can see and edit several lines at once.

Select it on any editable column with editor: 'largeText':

const grid = new Zengrid(mount, {
  columns: [
    { field: 'notes', header: 'Notes', editable: true, editor: 'largeText',
      editorOptions: { rows: 6, maxLength: 500, showCharCount: true } },
  ],
});

Committing vs. a new line

Section titled “Committing vs. a new line”

Because the value is multi-line, the keys behave differently from the single-line editor:

Key Action
Enter (or Shift+Enter) Insert a new line — does not commit.
Ctrl / ⌘ + Enter Commit the value.
Tab Commit and move on.
Click outside Commit (unless stopOnBlur: false).
Escape Cancel and restore the original value.

editorOptions

Section titled “editorOptions”

Everything is configured declaratively through the column’s editorOptions — you never construct the editor yourself.

Option Type Purpose
rows number Visible rows of the textarea (default 5).
width number Panel width in px (default 320).
height number Fixed textarea height in px (otherwise fits rows).
placeholder string Placeholder shown when empty.
maxLength number Hard character cap enforced by the browser.
showCharCount boolean Show a live n / max counter under the textarea.
required boolean Reject an empty value on commit.
validator (value) => boolean | string Custom check; return a string to supply the error message.
selectAllOnFocus boolean Select the existing text when the editor opens (default true).
className string Class on the textarea for custom styling.
stopOnBlur boolean Commit when the panel loses focus (default true).

A failing required / validator commit is governed by the grid-level editing.invalidEditMode: 'block' (default) keeps the editor open and flags the cell, 'revert' restores the old value, 'commit' accepts it but marks the cell.

Try it live

Section titled “Try it live”

Notes uses editor:'largeText'. Double-click a Notes cell to open the panel — press Enter to add a new line (it does NOT commit), then commit with Ctrl/⌘+Enter, Tab, or by clicking outside. Escape cancels. Try adding a couple of lines and clicking away.

Next

Section titled “Next”