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
navigate - Excel-like (type to edit)
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

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	onSearchCallback, minSearchLength, debounceMs