syidaxgrid
Home Pricing Settings

GRID FEATURE

Data snapshot

Snapshots retain rowData at a point in time for comparison with current data or another snapshot. They differ from view-state APIs that save column widths, filters, and focus.

Markdown source Features

How it works and when to use it

Use them to create a baseline before bulk edits and compare additions, changes, and removals afterward. Retention is limited; snapshots are not persistent server backups after leaving the page.

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. Create a baseline before editing

Save a named snapshot before starting a bulk operation.

javascript
grid.maxSnapshots = 10;
const before = await grid.captureSnapshot('Before quantity adjustment');
console.log(before);

Verify the result: An ID is returned for later comparison or restoration.

Example 2. Compare with current data

Inspect changes after editing from the baseline.

javascript
console.log(await grid.diffSnapshots(before));

Verify the result: Omitting the second ID compares against current data. Pass a second snapshot ID to compare two saved points.

Example 3. Restore and clean up

Check the actual result when the user chooses to restore.

javascript
const restored = await grid.restoreSnapshot(before);
console.log(restored, await grid.listSnapshots());

Verify the result: Restoration changes current data values. Remove unnecessary baselines with deleteSnapshot(id). Perform a separate save if server changes must also be reversed.

Combining features and troubleshooting

Keep row IDs stable to compare additions, modifications, and removals meaningfully.

Snapshot restoration does not restore column layout or filters. Use getState()/setState() for view configuration.

Related reading