CellCopyPaste
Feature
Allows using [Ctrl/CMD + C], [Ctrl/CMD + X] and [Ctrl/CMD + V] to cut, copy and paste cell or cell ranges. Also makes cut, copy and paste actions available via the cell context menu.
This feature will work alongside with RowCopyPaste but there is differences on functionality.
- Context menu actions, and keyboard shortcuts, will be processed by either feature depending on what is selected and where the context menu was triggered. Set rowOptionsOnCellContextMenu to
trueto show two sets of options when context menu is triggered on a selected cell. - They share clipboard, so even when the internal clipboard is used, it is not possible to have rows and cells copied or cut at the same time.
If the Clipboard API is available, that will be used. This enables copying and pasting between different Bryntum products or completely different applications. Please note that only string values are supported.
This feature is disabled by default
const grid = new Grid({
features : {
cellCopyPaste : true
}
});
targetElement.innerHTML = '<p>Cut, copy and paste cells or ranges of cells using keyboard shortcuts or context menu:</p>'; // grid with basic configuration const grid = new Grid({ // makes grid as high as it needs to be to fit rows autoHeight : true, appendTo : targetElement, features : { rowCopyPaste : false, cellCopyPaste : true }, selectionMode : { cell : true }, columns : [ { field : 'a', text : 'A' }, { field : 'b', text : 'B' }, { field : 'c', text : 'C' }, { field : 'd', text : 'D' }, { field : 'e', text : 'E' } ], data : [ { id : 1, a : 'Date', b : 'Weather', c : 'Produced kWh', d : 'Used kwH', e : 'Comments' }, { id : 2, a : '2022-01-10', b : 'Sunny -5ºC', c : 22, d : 71 }, { id : 3, a : '2022-02-10', b : 'Cloudy -3ºC', c : 11, d : 68 }, { id : 4, a : '2022-03-10', b : 'Snowy 0ºC', c : 7, d : 63 }, { id : 5, a : '2022-04-10', b : 'Sunshine +5ºC', c : 34, d : 49 }, { id : 6, a : '2022-05-10', b : 'Rainy +2ºC', c : 13, d : 55 }, { id : 7, a : '2022-06-10', b : 'Rainy +14ºC', c : 19, d : 31 }, { id : 8, a : '2022-07-10', b : 'Cloudy +18ºC', c : 21, d : 19 }, { id : 9, a : '2022-08-10', b : 'Sunshine +30ºC', c : 78, d : 12 }, { id : 10, a : '2022-09-10', b : 'Sunshine +10ºC', c : 55, d : 19 }, { id : 11, a : '2022-10-10', b : null, c : null, d : null }, { id : 12, a : '2022-11-10', b : null, c : null, d : null }, { id : 13, a : '2022-12-10', b : null, c : null, d : null } ] }); Keyboard shortcuts
The feature has the following default keyboard shortcuts:
| Keys | Action | Action description |
|---|---|---|
| Ctrl+C | copy | Calls copy which copies selected cell values into the clipboard. |
| Ctrl+X | cut | Calls cut which cuts out selected cell values and saves in clipboard. |
| Ctrl+V | paste | Calls paste which inserts string values from the clipboard. |
For more information on how to customize keyboard shortcuts, please see this guide.
See also
- RowCopyPaste - Copy/paste entire rows
- FillHandle - Drag-fill cells
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
Set this to
falseto not use native Clipboard API even if it is available -
Configure which sources $name this class allows pasting model data from. Accepts string or array. Unspecified accepts all. If source is not accepted, it will try to use the string value instead.
-
If
truethis prevents cutting and pasting. Will default totrueif CellEdit feature is disabled. Set tofalseto prevent this behaviour. -
The format a copied date value should have when converted to a string. To learn more about available formats, check out DateHelper docs.
-
Default keyMap configuration: Ctrl/Cmd+c to copy, Ctrl/Cmd+x to cut and Ctrl/Cmd+v to paste. These keyboard shortcuts require a selection to be made.