Angular Data Grid Clipboard
You can perform all standard clipboard operations from and to the Angular Grid by using the system clipboard.
The Grid clipboard supports the following keyboard shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
Ctrl/Cmd (for Mac) + C | Copy selected or focused content. |
Ctrl/Cmd (for Mac) + X | Cut selected or focused content. |
Ctrl/Cmd (for Mac) + V | Paste the clipboard content. |
The following example demonstrates how the built-in clipboard feature works on multiple Grids.
To enable the built-in clipboard feature:
- Apply the built-in
kendoGridClipboarddirective. - Enable either the navigation or selection feature of the Grid or both.
- Set the
clipboardTargetproperty to define the starting point of the Grid clipboard operations. - Handle the
clipboard()event and update the Grid data as necessary.
The clipboard feature works with the actual Grid data and affects the current page only. Cell templates are not evaluated.
Clipboard Target
The clipboardTarget property defines the starting point of the clipboard operations. When both selection and navigation features are enabled, the clipboard operations can be applied to the highlighted row(s) or cell(s) or focused cell.
To determine the target of the clipboard operation set theclipboardTarget to:
selection(default)—The clipboard will copy the content of all selected cell(s) or row(s) from the current page. On paste, the first selected cell will serve as the pivotal point for the pasted content.activeCell—The clipboard will only copy the content of the current active cell or its row. On paste, the active cell will serve as the pivotal point for the pasted content.
Current Selection
To define the Grid selection as the clipboard operations target, enable the selection functionality, and apply the kendoGridClipboard.
<kendo-grid ...
[selectable]="true"
kendoGridClipboard>
</kendo-grid>The following example demonstrates how to cut or copy selected row(s) and paste the copied content in the same Grid.
Active Cell
To set the starting point for the clipboard operations, when the Grid navigation is enabled, set the clipboardTarget property to activeCell.
<kendo-grid ...
[navigable]="true"
kendoGridClipboard
clipboardTarget="activeCell">
</kendo-grid>The following example demonstrates how to cut or copy focused cell and paste the copied content in the same Grid.
Whole Row
To apply the clipboard operations on the entire row data set the wholeRow property of the clipboardSettings option to true. The option is especially useful in the following scenarios:
- When navigation is enabled and a single cell is focused at a time.
- When cell selection is enabled.
<kendo-grid ...[clipboardSettings]="{wholeRow: false}"></kendo-grid>Using Navigation
The following example demonstrates the wholeRow property in action.
Using Cell Selection
The following example demonstrates the wholeRow property with multiple cell selection.
Including Column Headers
To include the column headers of the copied row(s) in the clipboard, set the copyHeaders property of the clipboardSettings to true.
<kendo-grid ...[clipboardSettings]="{copyHeaders: true}"></kendo-grid>The following example demonstrates the copyHeaders option is action.