Data and events

How it works and when to use it

Most public methods return Promises, so use await to read completion results. Event names are case-sensitive, and payloads are carried in CustomEvent.detail.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

• Installation and integration · Shared sample data

Example 1. Read editing results

Check the actual event type for the edited cell and its before/after values.

const controller = new AbortController();
grid.addEventListener('cellValueChanged', event => {
  console.log(event.detail);
}, { signal: controller.signal });

Verify the result: Build the app's save payload from actual changes rather than counting events.

Example 2. Check call results

Read selected rows through the API instead of assuming they are the first items in the source array.

const selectedIds = await grid.getSelectedRowIds();
console.log(selectedIds);

Verify the result: Use selected IDs to determine approval or export targets. Calling a method and completing a server save are separate steps.

Example 3. Clean up on view disposal

Use the first example's AbortController to remove subscriptions together.

controller.abort();

Verify the result: Events will not run twice when the view reopens. Also clean up app-created WebSockets, timers, and requests.

Combining features and troubleshooting

Writing the same value after receiving an event can create an event loop. Distinguish user changes from app-applied updates.

Do not confuse an event's rowIndex with a stable rowId. Use IDs for persistent keys.

APIs used by this feature

• context

  Passes shared app context to callbacks and the Grid API, such as app-managed permissions and services.

• getApi

  Accesses the current Grid's typed API and app context. Read from a fully initialized element.

• getRow

  Finds a row object by stable row ID, rather than display index.

• getDisplayedRowAtIndex

  Finds a row object by its current display index. Sorting, filtering, and grouping can change the row at an index.

• forEachRow

  Runs a callback for each row object. Use forEachDisplayedRow when display order matters.

• forEachDisplayedRow

  Iterates current displayed rows for app features that distinguish source order from display order.

• cellClicked

  Emitted on a cell click. Read the row, field, and input context from detail.

• cellDoubleClicked

  Emitted on a cell double-click. Avoid conflicts between starting editing and opening app details.

• rowClicked

  Emitted on a row click. Distinguish the click itself from the resulting selection.

• gridObjectChanged

  Emitted when public objects such as rows and columns change. Read the target and changes from detail.

Related reading

• How rows, columns, and IDs relate
• Connect results and events
• Explore in Features

  The guide describes which interactions are available to try.