syidaxgrid
Home Pricing Settings

GRID FEATURE

Data updates

Replace rowData when receiving a complete query result. For partial changes, pass add, update, and remove to applyTransaction. Updates match through getRowId, not display positions.

Markdown source Features

How it works and when to use it

Transaction returns describe what actually happened. Inspect updated, rejected, and other results instead of assuming requested values were applied. Browser changes do not imply server persistence.

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.

Example 1. Replace the full query result

Replace the list with orders queried for another period. Pass the array returned by your app's query API all at once.

javascript
const response = await fetch('/api/orders?month=2026-10');
if (!response.ok) throw new Error('Query failed');
const rows = await response.json();
grid.rowData = rows;

Verify the result: Only the new query result appears. /api/orders is an example endpoint your app must implement; if its response is an object, extract the actual rows array.

Example 2. Increase one order's quantity

Change the first order's quantity from 10 to 20. Pass a new row object that includes the other fields too.

javascript
const row = grid.rowData.find(row => row.id === 'ORD-0001');
if (row) {
  const result = await grid.applyTransaction({ update: [{ ...row, quantity: row.quantity + 10 }] });
  console.log(result.updated, result.rejected);
}

Verify the result: The matching order's quantity increases by 10. A total column calculated with valueGetter recalculates from the new quantity.

Example 3. Handle additions and removals together

Remove a cancelled order while adding a new one. Find the removal target in the current data before passing it.

javascript
const cancelled = grid.rowData.find(row => row.id === 'ORD-0002');
const result = await grid.applyTransaction({
  add: [{ id: 'ORD-0004', product: 'Delta', quantity: 5, price: 100 }],
  remove: cancelled ? [cancelled] : []
});
console.log(result.added, result.removed, result.rejected);

Verify the result: Additions and removals appear in the same result report. Batching high-frequency incoming changes at intervals also reduces call volume.

Combining features and troubleshooting

Do not assume how missing fields in update objects are handled; spread the existing row and override changed values. Manage request order so stale responses cannot overwrite recent edits.

For large changes, collect the delta instead of reassigning all rowData for every row. Server row models have their own transaction APIs, distinct from client transactions.

Related reading