Data and events.

Connect actual Grid results to your app through CustomEvent.detail and asynchronous APIs.

Quick overview

Your app needs to know when users change quantities or select orders. Handle Grid events to connect save buttons and detail panels.

Integration steps

Inspect results in the view first
Edit Quantity in the workspace and inspect the latest result above the code view. Locate the before/after values.
Subscribe to events
Subscribe to cellValueChanged and read rowId, field, oldValue, and newValue from event.detail. Event names are case-sensitive.
Connect operations and cleanup
Use received values for server saving or other operations. Remove subscriptions when closing the view and report save failures to users.

Expected results

Pass actual Grid operation results into app logic.

Read asynchronous method results with await. stateUpdated is a change notification, not the complete saved state; read the latter with getState().

Useful terms

event.detail: The actual result payload carried by an event.
Promise / await: An asynchronous result / syntax that waits for and reads that result.

Event results

Event names are case-sensitive. event.detail contains actual operation results. For example, cellValueChanged provides the row ID, column, old value, new value, and change reason.

grid.addEventListener('cellValueChanged', event => {
  const { rowId, field, oldValue, newValue, source } = event.detail;
  console.log({ rowId, field, oldValue, newValue, source });
});

grid.addEventListener('selectionChanged', event => {
  console.log(event.detail);
});

Latest workspace results shows JSON for the last operation above the code view. Use Copy JSON to retrieve the complete value.

API calls

Web Component methods return Promises. Read their results with await. getApi() returns an API connected to the Grid. See the common API reference for property, method, and event types.

await customElements.whenDefined('sy-grid');
const api = await grid.getApi();
console.log(api);
const state = await grid.getState();
console.log(state);

Shared API reference

Connections and cleanup

Clean up event subscriptions and external connections when disposing of a view. Implement server saving with failure, retry, and concurrent-edit policies in your app. A Grid edit event alone does not indicate server persistence.

const controller = new AbortController();
grid.addEventListener('stateUpdated', async event => {
  console.log(event.detail); // Notification of changed areas
  const state = await grid.getState();
  if (controller.signal.aborted) return;
  console.log(state); // Actual complete state
}, { signal: controller.signal });

// When disposing of the view:
// controller.abort();