Skip to content

Grid clipboard interactions

Zdravko Kolev edited this page Jul 10, 2019 · 2 revisions

Grid clipboard interactions

Revision history

Version Author Date Notes
1.0 Radoslav Karaivanov 07/10/2019 Initial draft
1.1 Zdravko Kolev 07/10/2019 Finalizing spec

Table of content

  1. Overview
  2. Functionality
  3. Implementation
  4. Issues and limitations
  5. API
  6. Test Scenarios


The premise of this document is to expose a sufficiently fast, easy and customizable way of transferring data in/out of the grid through the current selection. The main idea being to give the user the ability to copy/paste data from the grid into Excel and/or other external programs.

The implementation is based on the default cut, copy and paste browser events with the eventual possibility to use the Clipboard API once it is standardized across most of the browser vendors.

The current version of this specification covers only the copy from gridIniti behavior.


From the point of the end user, the copy interaction should Just work™ 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/Paste action through the browser menu
  • macOS
    • ⌘ Cmd + C as a keyboard shortcut
    • ⌘ Cmd + V as a keyboard shortcut
    • Copy/Paste action through the browser menu


There is a new @Input property object exposed from the grid - clipboardOptions, and a new @Output onGridCopy notifying when a copy is performed.

Issues and limitations

  1. 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.
  2. The copy behavior is disabled while the grid is in edit mode.


clipboardOptions @Input properties

Name Description Type Default value
enabled Enables/disables copying of selected cells Boolean true
copyHeaders When performing the copy, include the associated headers Boolean true
copyFormatters Apply any existing column formatters to the copied data Boolean true
separator The string separator to use the for formatting the data in the clipboard String \t


Name Description Cancelable Event arguments
onGridCopy Emitted before processing the selected cells and writing to the clipboard. True IGridClipboardEvent

Note: When the IGridClipboardEvent is canceled the default browser copy behavior takes place.


Name Description Type Default value
data The data from the all the selected cells in the grid Array []
cancel When canceled the default browser behavior takes place Boolean false

Test scenarios


  • Copy data with default settings
  • Copy data when there are no selected cells
  • Copy data with different separator
  • Copy data without headers
  • Copy data with Disabled clipboardOptions
  • With Disabled copyFormatters
  • Cancel onGridCopy event
  • Copy when there is a cell in edit mode
Clone this wiki locally
You can’t perform that action at this time.