Web Grid Showcase

ED01 Text & Number Editors

Basic input editing with edit triggers and cursor start positions

Live Demo

Click any cell to edit. ID column is read-only.

Code

Text & Number

Description

Edit Triggers

click - Single click
dblclick - Double click (default)
navigate - Excel-like (type to edit)
button - Edit button in cell
always - Always in edit mode

Edit Start Selection

mousePosition - Cursor at click (default)
selectAll - Select all text
cursorAtStart - Cursor at start
cursorAtEnd - Cursor at end

Text Options

maxLength, placeholder, pattern

Number Options

min, max, step, decimalPlaces, allowNegative

ED02 Select Editor

Dropdown selection with value/display members and option grouping

Live Demo

Click status cells to see dropdown.

Code

Select Editor

Description

Editor Types

select - Static dropdown
combobox - Filterable dropdown
autocomplete - Async search

Option Properties

valueMember - Value property

displayMember - Display text

iconMember - Optional icon

groupMember - Group heading

ED03 Validation

Validate input and transform values with beforeCommitCallback

Live Demo

Try entering invalid email or salary outside $30K-$200K range.

Code

Validation

Description

beforeCommitCallback

Called before value is saved. Return:

valid: false - Block commit, show error
valid: true - Allow commit
transformedValue - Modify the value

Events

onrowchange - After successful commit

onvalidationerror - When validation fails

ED04 Rich Validation Tooltips

Custom HTML tooltips with escaped user input for validation errors

Live Demo

Enter invalid email or salary, then hover over the red cell to see rich tooltip.

Code

Rich Tooltips

Description

validationTooltipCallback

Return HTML string for rich error display.

Context Object

field - Column field name
error - Validation message
value - The invalid value
row - Row data
rowIndex - Row index

Priority

Column-level overrides grid-level callback.

Security

Always escape user values to prevent XSS.

All Editor Types

Type	Description	Key Options
`text`	Text input	maxLength, placeholder, pattern, inputMode
`number`	Numeric input	min, max, step, decimalPlaces, allowNegative
`checkbox`	Boolean toggle	trueValue, falseValue
`select`	Static dropdown	options, valueMember, displayMember
`combobox`	Filterable dropdown	options, searchMember, allowEmpty
`date`	Calendar picker	minDate, maxDate, dateFormat, outputFormat
`autocomplete`	Async search	searchCallback, minSearchLength, debounceMs
`custom`	Custom editor	cellEditCallback (commit/cancel)

Grid Modes

The mode property sets sensible defaults for common use cases:

Mode	Edit Trigger	Cell Selection	Best For
`read-only`	None (not editable)	Click selects cells	Data display, reporting
`excel`	`navigate` (type to edit)	Click selects cells	Spreadsheet-like editing
`input-matrix`	`always` (always editing)	Shift+Click selects cells	Data entry forms

Grid Modes

Additional Editor Examples

Checkbox Editor

Combobox Editor

Autocomplete Editor

Date Editor

Custom Editor

Shared Dropdown Options

These editorOptions work with select, combobox, and autocomplete editors:

Option	Description
`loadOptions`	Async function to load options dynamically: `(row, field) => Promise<Option[]>`
`optionsLoadTrigger`	When to load: `'immediate'` \| `'oneditstart'` \| `'ondropdownopen'`
`renderOptionCallback`	Custom HTML for each option: `(option, ctx) => string`
`dropdownMinWidth`	Minimum width for dropdown panel
`subtitleMember`	Property name for subtitle text below option label
`disabledMember`	Property name for disabled state on options
`onselect`	Callback when an option is selected: `(option, row) => void`

Dropdown Configuration

These properties control dropdown behavior for select, combobox, and autocomplete editors:

Property	Level	Default	Description
`dropdownToggleVisibility`	Grid / Column	`'always'`	`'always'` shows toggle arrow even when not editing; `'on-focus'` shows only when cell is focused
`shouldShowDropdownOnFocus`	Grid	`true`	Auto-open dropdown when cell receives focus
`shouldOpenDropdownOnEnter`	Grid / Column	`false`	Enter key opens dropdown (vs moving to next row)