RowCopyPaste

Allow using [Ctrl/CMD + C/X] and [Ctrl/CMD + V] to copy/cut-and-paste rows. Also makes cut, copy and paste actions available via the cell context menu.

You can configure how a newly pasted record is named using generateNewName

This feature is enabled by default

const grid = new Grid({
    features : {
        rowCopyPaste : true
    }
});

Row copy paste

//<code-header>
fiddle.title = 'Row copy paste';
//</code-header>
targetElement.innerHTML = '<p>Copy/cut and paste rows 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,
    columns    : [
        { field : 'name', text : 'Name' },
        { field : 'job', text : 'Job', renderer : ({ value }) => value || 'Unemployed' }
    ],

    data : [
        { id : 1, name : 'Bill', job : 'Retired' },
        { id : 2, name : 'Elon', job : 'Visionary' },
        { id : 3, name : 'Me' }
    ]
});

This feature will work alongside with CellCopyPaste 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.

Keyboard shortcuts

The feature has the following default keyboard shortcuts:

Keys	Action	Weight ¹	Action description
`Ctrl`+`C`	copy	10	Calls copyRows which copies selected row(s) into the clipboard.
`Ctrl`+`X`	cut	10	Calls copyRows which cuts out selected row(s) and saves in clipboard.
`Ctrl`+`V`	paste	10	Calls pasteRows which inserts copied or cut row(s) from the clipboard.

¹ Customization of keyboard shortcuts that has a weight can affect other features that also uses that particular keyboard shortcut. Read more in our guide.

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 our guide.

Configs

Common

disabledInstancePlugin

listenersEvents

Other

cutOnly: Boolean= false

If true, this translates copy actions to cut actions and removes the context menu Copy option.

nameField: String= name

The field to use as the name field when updating the name of copied records

rowOptionsOnCellContextMenu: Boolean= false

Adds Cut (row), Copy (row) and Paste (row) options when opening a context menu on a selected cell when cellSelection and CellCopyPaste is active. Default behaviour will only provide row copy/paste actions on a selected row.

catchEventHandlerExceptionsEvents

copyOnlyCopyPasteBase

dateFormatCopyPasteBase

emptyValueCharCopyPasteBase

generateNewNameCopyPasteBase

keyMapCopyPasteBase

toCopyStringCopyPasteBase

toPasteValueCopyPasteBase

useNativeClipboardCopyPasteBase

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isRowCopyPaste: Boolean= truereadonly

Identifies an object as an instance of RowCopyPaste class, or subclass thereof.

isRowCopyPaste: Boolean= truereadonlystatic

Identifies an object as an instance of RowCopyPaste class, or subclass thereof.

isClipboardableClipboardable

isCopyPasteBaseCopyPasteBase

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

generateNewNameCopyPasteBase

Functions

Common

copyRows

Copy or cut selected rows to clipboard to paste later

Parameter	Type	Description
`isCut`	Boolean	Copies by default, pass `true` to cut

pasteRows

Paste rows below selected or passed record

Parameter	Type	Description
`record`	Model	Paste below this record, or currently selected record if left out

Returns: Model[] -

Pasted records

clearClipboardClipboardable

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Other

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Events

beforeCopy

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

// Adding a listener using the "on" method
rowCopyPaste.on('beforeCopy', ({ source, records, isCut, entityName }) => {

});

Parameter	Type	Description
`source`	Grid	Owner grid
`records`	Model[]	The records about to be copied
`isCut`	Boolean	`true` if this is a cut action
`entityName`	String	'row' to distinguish this event from other beforeCopy events

beforePaste

Fires on the owning Grid before a paste action is performed, return false to prevent the action

// Adding a listener using the "on" method
rowCopyPaste.on('beforePaste', ({ source, referenceRecord, records, originalRecords, isCut, entityName, data }) => {

});

Parameter	Type	Description
`source`	Grid	Owner grid
`referenceRecord`	Model	The reference record, the clipboard event records will be pasted above this record
`records`	Model[]	The records about to be pasted
`originalRecords`	Model[]	For a copy action, these are the records that were copied. For cut action, this is same as the `records` param.
`isCut`	Boolean	`true` if this is a cut action
`entityName`	String	'row' to distinguish this event from other beforePaste events
`data`	Model[] \| String	The clipboard data (Model instances or raw string)

copy

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

// Adding a listener using the "on" method
rowCopyPaste.on('copy', ({ source, originalRecords, records, isCut, entityName }) => {

});

Parameter	Type	Description
`source`	Grid	Owner grid
`originalRecords`	Model[]	The records that were copied
`records`	Model[]	The new record copies. If this is a cut action, this will be the same record instances as `records`
`isCut`	Boolean	`true` if this is a cut action
`entityName`	String	'row' to distinguish this event from other copy events

paste

Fires on the owning Grid after a paste action is performed.

// Adding a listener using the "on" method
rowCopyPaste.on('paste', ({ source, referenceRecord, records, originalRecords, isCut, entityName }) => {

});

Parameter	Type	Description
`source`	Grid	Owner grid
`referenceRecord`	Model	The reference record, below which the records were pasted
`records`	Model[]	Pasted records
`originalRecords`	Model[]	For a copy action, these are the records that were copied. For a cut action, this is same as the `records` param.
`isCut`	Boolean	`true` if this is a cut action
`entityName`	String	'row' to distinguish this event from other paste events

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onBeforeCopy

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

new RowCopyPaste({
    onBeforeCopy({ source, records, isCut, entityName }) {

    }
});

Parameter	Type	Description
`source`	Grid	Owner grid
`records`	Model[]	The records about to be copied
`isCut`	Boolean	`true` if this is a cut action
`entityName`	String	'row' to distinguish this event from other beforeCopy events

onBeforePaste

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

new RowCopyPaste({
    onBeforePaste({ source, referenceRecord, records, originalRecords, isCut, entityName, data }) {

    }
});

Parameter	Type	Description
`source`	Grid	Owner grid
`referenceRecord`	Model	The reference record, the clipboard event records will be pasted above this record
`records`	Model[]	The records about to be pasted
`originalRecords`	Model[]	For a copy action, these are the records that were copied. For cut action, this is same as the `records` param.
`isCut`	Boolean	`true` if this is a cut action
`entityName`	String	'row' to distinguish this event from other beforePaste events
`data`	Model[] \| String	The clipboard data (Model instances or raw string)

onCopy

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

new RowCopyPaste({
    onCopy({ source, originalRecords, records, isCut, entityName }) {

    }
});

Parameter	Type	Description
`source`	Grid	Owner grid
`originalRecords`	Model[]	The records that were copied
`records`	Model[]	The new record copies. If this is a cut action, this will be the same record instances as `records`
`isCut`	Boolean	`true` if this is a cut action
`entityName`	String	'row' to distinguish this event from other copy events

onPaste

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

new RowCopyPaste({
    onPaste({ source, referenceRecord, records, originalRecords, isCut, entityName }) {

    }
});

Parameter	Type	Description
`source`	Grid	Owner grid
`referenceRecord`	Model	The reference record, below which the records were pasted
`records`	Model[]	Pasted records
`originalRecords`	Model[]	For a copy action, these are the records that were copied. For a cut action, this is same as the `records` param.
`isCut`	Boolean	`true` if this is a cut action
`entityName`	String	'row' to distinguish this event from other paste events

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

RowCopyPaste

Keyboard shortcuts

Configs

Common

Other

Misc

Properties

Common

Class hierarchy

Lifecycle

Misc

Other

Functions

Common

Configuration

Events

Lifecycle

Misc

Other

Events

Event handlers

Typedefs