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

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

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

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