RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.telerik.com/kendo-react-ui/components/grid/interactivity/clipboard below:

React Data Grid Interactivity Clipboard

Premium

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

The Grid Clipboard feature is part of KendoReact premium, an enterprise-grade UI library with 120+ free and premium components for building polished, performant apps. Test-drive all features with a free 30-day trial.Start Free Trial

The Data 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.

To enable the built-in clipboard feature:

Enable the selection feature of the Data Grid and handle its built in select state.
Enable the clipboard property to enable the clipboard copy, cut and paste operations.
Handle the onClipboard function and use the populateClipboardData function to update the Data Grid data as necessary by using the available copied cells.

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 collection 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: