Premium

React Tree Grid Clipboard Overview

Copy to clipboard operations are now available in the IgrTreeGrid. This functionality provides a fast, easy and customizable way to copy data of the React IgrTreeGrid through the current multi cell data select. System Clipboard behavior gives the user ability to copy data from the IgrTreeGrid into Excel or other external programs.

React Tree Grid Clipboard Example

Functionality

Copy behavior is working with the default interaction defined by the browser and operating system. Thus for the copy and paste behaviors, these are:

Windows/Unix based
- CTRL + C / CTRL + Ins as a keyboard shortcut
- CTRL + V / SHIFT + Ins as a keyboard shortcut
- Copy action through the browser menu
macOS
- CMD + C as a keyboard shortcut
- CMD + V as a keyboard shortcut
- Copy action through the browser menu

Limitations

Both the cut and copy events are not natively supported in Internet Explorer. The exception is the

paste event (IE 11) which is emitted but does not expose the ClipboardData property in the event.

In order to copy cells in IE 11, you can use the keyboard selection. Hold the SHIFT key in order to make a multi-cell selection, press CTRL + C in order to copy.

The copy behavior is disabled while the grid is in edit mode.
The current version of this feature covers only the copy from grid behavior. Later on we plan to expose paste within grid behavior.

API Usage

We expose IgrTreeGrid.clipboardOptions property, which handles the following options:

IgrClipboardOptions.enabled Enables/disables copying of selected cells.
IgrClipboardOptions.copyHeaders Include the associated headers when copying.
IgrClipboardOptions.copyFormatters Apply any existing column formatters to the copied data.
IgrClipboardOptions.separator The string separator to use the for formatting the data in the clipboard. Default is /t

Excel can automatically detect text that is separated by tabs (tab-delimited /t) and properly paste the data into separate columns. When the paste format doesn’t work, and everything you paste appears in a single column, then Excel’s delimiter is set to another character, or your text is using spaces instead of tabs.

gridCopy Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the IgrTreeGrid.clipboardOptions.

API References

Additional Resources

Our community is active and always welcoming to new ideas.