KendoReact Data Grid Clipboard

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

The Data Grid clipboard supports the following keyboard shortcuts:

To enable the built-in clipboard feature:

1. Enable the selection feature of the Data Grid.
2. Enable the clipboard property to enable the clipboard copy, cut and paste operations.
3. Handle the onClipboard function and use the populateClipboardData function to update the Data Grid data as necessary by using the .

As a result, the Grid allows you to:

• Copy/paste/cut a single cell or row
• Copy/paste/cut multiple cells or rows
• Copy/paste/cut a range of cells or rows by dragging

The populateClipboardData function populates the clipboard data. It takes the ClipboardDataEvent event arguments, the current data loaded in the Data Grid and the selection state and returns the ClipboardData containing the collections of copied and pasted items.

In case you want to disable any of the copy/paste/cut operations, you can determine the current action type based on the event.type value of the ClipboardDataEvent object.

The following example demonstrates how to cut or copy selected row(s) and paste the copied content in the same Data Grid or in Microsoft Excel.

Clipboard Settings

The content of the Data Grid is copied in an Excel compatible format where the cells are separated by a tab character (\t) and the rows are separated by new line (\n) character. You can customize the default clipboard behavior by using the following clipboard settings:

• cellDelimitter—Determines what is the delimiter used to separate the cells. Defaults to '\t'.
• copyHeaders—Determines whether column titles or field names will be included in the generated data during the copy and cut actions. Defaults to false.
• newLineDelimiter—Determines what is the delimiter used to separate the rows. Defaults to '\r\n'.

The following example illustrates how by activating the copyHeaders prop you gain the ability to copy the headers of the selected cells, regardless of whether the headers are included in the current selection. To test this functionality copy a range of cells from the Data Grid below and paste them in Microsoft Excel:

Suggested Links

• API Reference of the Grid
• API Index of the Grid
• PopulateClipboard