Example of Clipboard in React Tree Grid Component

/
/
Clipboard

This sample demonstrates copy to clipboard functionality of the Tree Grid component. Select rows and click Copy button from toolbar to copy content. To copy with header click Copy with header button from toolbar.

More Details...

Loading....
Description

Selected rows or cells data in the Tree Grid can be copied into the clipboard using the Keyboard shortcuts and copy method.

In this demo, selected rows data can be copied into the clipboard using the below Keyboard shortcuts or toolbar interactions.

  • Ctrl + C - Selected rows or cells data without header.
  • Ctrl + Shift + H - Selected rows or cells data with header.

Tree Grid provides support for a set of copy modes with copyHierarchyMode property. The below are the type of copy mode available in Tree Grid.

  • Parent - This is the default copy hierarchy mode in Tree Grid. Clipboard value have the selected records with its parent records, if the selected records not have any parent record then the selected record will be in clipboard.
  • Child - Clipboard value have the selected records with its child record, if the selected records do not have any child record then the selected records will be in clipboard.
  • Both - Clipboard value have the selected records with its both parent and child record. If the selected records do not have any parent and child record then the selected records will be in clipboard.
  • None - Only the Selected records will be in clipboard.

While using the Tree Grid in a touch device environment, there is an option for multi-selection through single tap on the row and it will show a popup with the multi-selection symbol. Tap the icon to enable multi-selection in a single tap and click for the toolbar to copy the selected records into clipboard.

More information on the Clipboard feature can be found in this documentation section.