CellCopyPaste
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
}
});
//<code-header>
fiddle.title = 'Cell copy paste';
//</code-header>
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. |
Ctrl is the equivalent to Command and Alt
is the equivalent to Option for Mac usersFor more information on how to customize keyboard shortcuts, please see this guide.
Configs
17
Configs
17Other
Set this to false to not use native Clipboard API even if it is available
Misc
Properties
18
Properties
18Common
Class hierarchy
Functions
32
Functions
32Common
Other
Copies selected cells to clipboard (native if accessible) to paste later
Cuts selected cells to clipboard (native if accessible) to paste later
Pastes string data into a cell or a range of cells. Either from native clipboard if that is accessible or from a fallback clipboard that is only available to the owner Grid.
The string data will be split on \n and \t and put in different rows and columns accordingly.
Note that there must be a selected cell to paste the data into.
Configuration
Events
Misc
Events
9
Events
9Fires on the owning Grid before a copy action is performed, return false to prevent the action
// Adding a listener using the "on" method
cellCopyPaste.on('beforeCopy', ({ source, cells, data, isCut, entityName }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Grid | Owner grid |
cells | GridLocation[] | The cells about to be copied or cut |
data | String | The string data about to be copied or cut |
isCut | Boolean |
|
entityName | String | 'cell' to distinguish this event from other beforeCopy events |
Fires on the owning Grid before a paste action is performed, return false to prevent the action
// Adding a listener using the "on" method
cellCopyPaste.on('beforePaste', ({ source, clipboardData, targetCell, entityName, text }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Grid | Owner grid |
clipboardData | String | The clipboardData about to be pasted |
targetCell | GridLocation | The cell from which the paste will be started |
entityName | String | 'cell' to distinguish this event from other beforePaste events |
text | String | The raw text from clipboard |
Fires on the owning Grid after a copy action is performed.
// Adding a listener using the "on" method
cellCopyPaste.on('copy', ({ source, cells, copiedDataString, isCut, entityName }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Grid | Owner grid |
cells | GridLocation[] | The cells about to be copied or cut |
copiedDataString | String | The concatenated data string that was copied or cut |
isCut | Boolean |
|
entityName | String | 'cell' to distinguish this event from other copy events |
Fires on the owning Grid after a paste action is performed.
// Adding a listener using the "on" method
cellCopyPaste.on('paste', ({ source, clipboardData, modifiedRecords, targetCell, entityName }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Grid | Owner grid |
clipboardData | String | The clipboardData that was pasted |
modifiedRecords | Model[] | The records which have been modified due to the paste action |
targetCell | GridLocation | The cell from which the paste will be started |
entityName | String | 'cell' to distinguish this event from other paste events |
Event handlers
9
Event handlers
9Called on the owning Grid before a copy action is performed, return false to prevent the action
new CellCopyPaste({
onBeforeCopy({ source, cells, data, isCut, entityName }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Grid | Owner grid |
cells | GridLocation[] | The cells about to be copied or cut |
data | String | The string data about to be copied or cut |
isCut | Boolean |
|
entityName | String | 'cell' to distinguish this event from other beforeCopy events |
Called on the owning Grid before a paste action is performed, return false to prevent the action
new CellCopyPaste({
onBeforePaste({ source, clipboardData, targetCell, entityName, text }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Grid | Owner grid |
clipboardData | String | The clipboardData about to be pasted |
targetCell | GridLocation | The cell from which the paste will be started |
entityName | String | 'cell' to distinguish this event from other beforePaste events |
text | String | The raw text from clipboard |
Called on the owning Grid after a copy action is performed.
new CellCopyPaste({
onCopy({ source, cells, copiedDataString, isCut, entityName }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Grid | Owner grid |
cells | GridLocation[] | The cells about to be copied or cut |
copiedDataString | String | The concatenated data string that was copied or cut |
isCut | Boolean |
|
entityName | String | 'cell' to distinguish this event from other copy events |
Called on the owning Grid after a paste action is performed.
new CellCopyPaste({
onPaste({ source, clipboardData, modifiedRecords, targetCell, entityName }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Grid | Owner grid |
clipboardData | String | The clipboardData that was pasted |
modifiedRecords | Model[] | The records which have been modified due to the paste action |
targetCell | GridLocation | The cell from which the paste will be started |
entityName | String | 'cell' to distinguish this event from other paste events |