Data updates

Changing an order quantity does not require recreating the whole table. Pass the order ID and new values to update that row.

Try it yourself

1. Inspect the original value

   After resetting, inspect ORD-0001: quantity 10 and total 1,200.

2. Click Sample update

   Sample update above the table increases the first order's quantity by 10. After one click, verify quantity 20 and total 2,400.

3. Read the processing result

   Inspect the applyTransaction() result below the table. Each click adds another 10, and Undo reverses changes.

This example updates browser sample data. Connect actual server saving separately. Pass a new rowData array to display a complete new query result.

Useful terms

applyTransaction

A method passing rows to add, update, and remove together to the Grid.

getRowId

A function returning each row's unique ID so the same row can be found after sorting changes its position.

Key API examples

Application code that references the registered Grid element as grid.

// getRowId identifies the same order.
const row = grid.rowData[0];
if (row) {
  const result = await grid.applyTransaction({
    update: [{ ...row, quantity: Number(row.quantity) + 10 }]
  });
  console.log(result);
}