Angular Data Grid Clipboard

You can perform all standard clipboard operations from and to the Grid by using the system clipboard.

The Grid clipboard supports the following keyboard shortcuts:

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 kendoGridClipboard directive.
• Enable either the navigation or selection feature of the Grid or both.
• Set the clipboardTarget property 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.

Copy Code<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.

Copy Code<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.

Copy Code<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.

Copy Code<kendo-grid ...[clipboardSettings]="{copyHeaders: true}"></kendo-grid>

The following example demonstrates the copyHeaders option is action.

Suggested Links

• API reference of the GridClipboardDirective
• API Reference of the GridComponent
• API Index of the Grid