GRID FEATURE · PRO
Copy and paste ranges
Copy values from a rectangular range and paste them in the same row and column arrangement. Targets are determined from the starting cell and remain subject to editability, permissions, and validation.
How it works and when to use it
Even with the same clipboard format, results depend on target columns' number, date, and selection-value contracts. Test a small range first.
Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.
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. Copy a selected range
Select a range, then copy it from a user button action.
grid.rangeSelection = true;
console.log(await grid.copyRangeToClipboard());Verify the result: The selected cell layout is placed on the clipboard. Check the result for an absent selection or browser rejection.
Example 2. Paste quantities from a spreadsheet
Paste two or three copied numbers into the starting cell of the quantity column.
// Call from the user's Paste button
console.log(await grid.pasteFromClipboard());Verify the result: Target quantities and calculated columns update. Invalid formats and noneditable targets may not all be applied in the same way.
Example 3. Undo a paste
Read the result and undo unintended changes.
grid.addEventListener('clipboardPasted', event => console.log(event.detail));
// When the user requests Undo
await grid.undo();Verify the result: Distinguish changed cells from excluded cells. If changes have already been saved to the server, your app must handle reverting them there separately.
Combining features and troubleshooting
Ranges with merged cells or pinned rows may behave differently from regular areas. Use the returned report instead of deriving applied row counts from range dimensions.
Verify that protected columns reject copying and pasting through both UI and API paths.
Related reading
- How rows, columns, and IDs relate
- Connect results and events
- Explore in Features
The guide describes which interactions are available to try.