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.

Requires selectionMode.cell to be activated. Also, if the CellEdit feature is disabled, the copyOnly config will default to `true` which prevents cut-and-paste actions completely. Set copyOnly to `false` to prevent this behaviour.

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 true to 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
    }
});

Cell copy paste
//<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.
Please note that Ctrl is the equivalent to Command and Alt is the equivalent to Option for Mac users

For more information on how to customize keyboard shortcuts, please see this guide.

Configs

17

Common

disabledInstancePlugin
listenersEvents

Other

useNativeClipboard: Boolean= true

Set this to false to not use native Clipboard API even if it is available

copyOnlyCopyPasteBase
dateFormatCopyPasteBase
emptyValueCharCopyPasteBase
generateNewNameCopyPasteBase
keyMapCopyPasteBase
toCopyStringCopyPasteBase
toPasteValueCopyPasteBase

Misc

clientInstancePlugin
localeClassLocalizable
localizableLocalizable

Properties

18

Common

disabledInstancePlugin

Class hierarchy

isCellCopyPaste: Boolean= truereadonly
Identifies an object as an instance of CellCopyPaste class, or subclass thereof.
isCellCopyPaste: Boolean= truereadonlystatic
Identifies an object as an instance of CellCopyPaste class, or subclass thereof.
isClipboardableClipboardable
isCopyPasteBaseCopyPasteBase
isEventsEvents
isInstancePluginInstancePlugin
isLocalizableLocalizable

Lifecycle

configBase

Misc

clientInstancePlugin
localeHelperLocalizable
localeManagerLocalizable

Other

generateNewNameCopyPasteBase

Functions

32

Common

clearClipboardClipboardable

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.

LstaticLocalizable
onEvents
relayAllEvents
triggerEvents
unEvents

Configuration

applyDefaultsstaticBase

Events

Lifecycle

destroystaticBase

Misc

doDisableInstancePlugin
initClassstaticBase
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Events

9

Fires 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 }) => {

});
ParameterTypeDescription
sourceGrid

Owner grid

cellsGridLocation[]

The cells about to be copied or cut

dataString

The string data about to be copied or cut

isCutBoolean

true if this is a cut action

entityNameString

'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 }) => {

});
ParameterTypeDescription
sourceGrid

Owner grid

clipboardDataString

The clipboardData about to be pasted

targetCellGridLocation

The cell from which the paste will be started

entityNameString

'cell' to distinguish this event from other beforePaste events

textString

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 }) => {

});
ParameterTypeDescription
sourceGrid

Owner grid

cellsGridLocation[]

The cells about to be copied or cut

copiedDataStringString

The concatenated data string that was copied or cut

isCutBoolean

true if this was a cut action

entityNameString

'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 }) => {

});
ParameterTypeDescription
sourceGrid

Owner grid

clipboardDataString

The clipboardData that was pasted

modifiedRecordsModel[]

The records which have been modified due to the paste action

targetCellGridLocation

The cell from which the paste will be started

entityNameString

'cell' to distinguish this event from other paste events

catchAllEvents
destroyEvents
disableInstancePlugin
enableInstancePlugin

Event handlers

9

Called on the owning Grid before a copy action is performed, return false to prevent the action

new CellCopyPaste({
    onBeforeCopy({ source, cells, data, isCut, entityName }) {

    }
});
ParameterTypeDescription
sourceGrid

Owner grid

cellsGridLocation[]

The cells about to be copied or cut

dataString

The string data about to be copied or cut

isCutBoolean

true if this is a cut action

entityNameString

'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 }) {

    }
});
ParameterTypeDescription
sourceGrid

Owner grid

clipboardDataString

The clipboardData about to be pasted

targetCellGridLocation

The cell from which the paste will be started

entityNameString

'cell' to distinguish this event from other beforePaste events

textString

The raw text from clipboard

Called on the owning Grid after a copy action is performed.

new CellCopyPaste({
    onCopy({ source, cells, copiedDataString, isCut, entityName }) {

    }
});
ParameterTypeDescription
sourceGrid

Owner grid

cellsGridLocation[]

The cells about to be copied or cut

copiedDataStringString

The concatenated data string that was copied or cut

isCutBoolean

true if this was a cut action

entityNameString

'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 }) {

    }
});
ParameterTypeDescription
sourceGrid

Owner grid

clipboardDataString

The clipboardData that was pasted

modifiedRecordsModel[]

The records which have been modified due to the paste action

targetCellGridLocation

The cell from which the paste will be started

entityNameString

'cell' to distinguish this event from other paste events

onDestroyEvents
onDisableInstancePlugin
onEnableInstancePlugin

Typedefs

1