Web Grid Showcase

Overview

Web Grid uses a clear naming convention: events use on* (lowercase) and are fire-and-forget notifications. Callbacks use *Callback suffix and their return value affects behavior.

onrowchange

Fired when a cell value changes after editing.

Event Detail Type

Usage

onroweditstart / onroweditcancel

Fired when editing begins or is cancelled.

Edit Events

onvalidationerror

Fired when validation fails during editing.

Validation Error

ondatarequest

Fired when sorting or pagination changes. Essential for server-side data handling.

Event Detail Type

Server-Side Data

ontoolbarclick

Fired when a toolbar button is clicked.

Event Detail Type

Toolbar Click

oncontextmenuopen

Fired when right-click context menu opens.

Context Type

Context Menu Open

onrowdelete

Fired when Ctrl+Delete is pressed on a row in navigate mode.

Row Delete

paginationLabelsCallback

Customize or translate pagination text.

Types

Translation

summaryContentCallback

Generate custom summary content (totals, aggregates, etc.).

Context Type

Summary

customStylesCallback

Inject custom CSS into the shadow DOM.

Custom Styles

rowClassCallback

Apply dynamic CSS classes to entire rows.

Row Class

onrowfocus

Fired when the focused row changes. Useful for master/detail patterns.

Row Focus

onrowlockchange

Fired when a row's lock state changes (locked or unlocked).

Row Lock Change

oncellselectionchange

Fired when cell selection changes.

Cell Selection Change

oncolumnresize

Fired after a column is resized by dragging.

Column Resize

oncolumnreorder

Fired after a column is reordered by drag-and-drop.

Column Reorder

fillDragCallback

Called before fill handle completes. Return false to cancel the fill operation.

Fill Drag

onheadercontextmenuopen

Fired when the header context menu opens.

Header Context Menu Open

onbeforepaste / onpaste

Control and respond to paste operations from clipboard (Ctrl+V with TSV data). Use detail.cancel = true in onbeforepaste to prevent the paste.

Paste Callbacks

onrowaction (legacy)

Legacy alias for ontoolbarclick. Both work identically - prefer ontoolbarclick for new code.

Legacy Alias

Quick Reference

Events (on*)

Fire-and-forget notifications. Return value is ignored.

`onrowchange`	Cell value changed
`onroweditstart`	Editing began
`onroweditcancel`	Editing cancelled
`onvalidationerror`	Validation failed
`ondatarequest`	Sort/page changed
`ontoolbarclick`	Toolbar button clicked
`oncontextmenuopen`	Context menu opening
`onrowdelete`	Ctrl+Delete pressed
`onrowfocus`	Row focus changed
`onrowlockchange`	Row lock state changed
`oncellselectionchange`	Cell selection changed
`oncolumnresize`	Column resized
`oncolumnreorder`	Column reordered
`onheadercontextmenuopen`	Header menu opening
`onbeforepaste`	Before paste operation
`onpaste`	After paste completes
`onrowaction`	Toolbar click (legacy alias)

Callbacks (*Callback)

Return value affects component behavior.

`formatCallback`	Returns display string
`templateCallback`	Returns HTML string
`tooltipCallback`	Returns tooltip text
`validateCallback`	Returns error or null
`beforeCommitCallback`	Returns ValidationResult
`cellClassCallback`	Returns CSS class
`rowClassCallback`	Returns CSS class
`customStylesCallback`	Returns CSS string
`paginationLabelsCallback`	Returns labels object
`summaryContentCallback`	Returns HTML string
`fillDragCallback`	Controls fill handle behavior
`validationTooltipCallback`	Returns HTML for validation tooltip
`beforeCopyCallback`	Transforms value before copy
`beforePasteCallback`	Processes value before paste
`cellEditCallback`	Takes over cell editing
`shortcutsHelpContentCallback`	Returns custom HTML for shortcuts overlay
`idValueCallback`	Returns row ID for identification
`renderCallback`	Imperative DOM rendering

Framework Integration

Svelte

React

Vue 3

Important Notes

Naming Convention: on* = event (fire-and-forget), *Callback = return value matters
onrowchange: Contains both row (original) and draftRow (with changes)
ondatarequest: Essential for server-side sorting and pagination
customStylesCallback: Styles are injected into shadow DOM - use !important if needed
Async Support: ondatarequest handler can be async