v7.3.0
SupportExamplesFree Trial

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.

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

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.

See also

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class
  • Set this to false to 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 true this prevents cutting and pasting. Will default to true if CellEdit feature is disabled. Set to false to 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.

  • Internal listeners, that cannot be removed by the user.

  • The widget which this plugin is to attach to.

    Has a corresponding runtime client property.

  • Set to false to disable localization of this object.

  • Properties

    Properties are getters/setters or publicly accessible variables on this class
    • isCellCopyPaste : Booleantrue
      READONLY
      static
      ADVANCED
      Identifies an object as an instance of CellCopyPaste class, or subclass thereof.
    • isClipboardable : Booleantrue
      READONLY
      static
      ADVANCED
      Clipboardable
      Identifies an object as an instance of Clipboardable class, or subclass thereof.
    • isEvents : Booleantrue
      READONLY
      static
      ADVANCED
      Events
      Identifies an object as an instance of Events class, or subclass thereof.
    • isLocalizable : Booleantrue
      READONLY
      static
      ADVANCED
      Localizable
      Identifies an object as an instance of Localizable class, or subclass thereof.
    • properties : Object
      internal
      static
      CopyPasteBase

      A class property getter for the default values of internal properties for this class.

    • emptyArray : Array
      internal
      READONLY
      CopyPasteBase

      An empty array that can be used as a default value.

    • emptyObject : Object
      internal
      READONLY
      CopyPasteBase

      An empty object that can be used as a default value.

    • isCellCopyPaste : Booleantrue
      READONLY
      ADVANCED
      Identifies an object as an instance of CellCopyPaste class, or subclass thereof.
    • isCopyPasteBase : Booleantrue
      READONLY
      ADVANCED
      CopyPasteBase
      Identifies an object as an instance of CopyPasteBase class, or subclass thereof.
    • isInstancePlugin : Booleantrue
      READONLY
      ADVANCED
      CopyPasteBase
      Identifies an object as an instance of InstancePlugin class, or subclass thereof.
    • clipboard : Object
      private
      READONLY
      Clipboardable

      Gets the current shared Clipboard instance

    • A method used to generate the name for a copy-pasted record. By defaults appends "- 2", "- 3" as a suffix. Override it to provide your own naming of pasted records.

      Has a corresponding generateNewName config.

    • config : Object
      READONLY
      ADVANCED
      CopyPasteBase

      Returns a copy of the full configuration which was used to configure this object.

    • This property is set to true before the constructor returns.

    • isDestroying : Boolean
      READONLY
      ADVANCED
      CopyPasteBase

      This property is set to true on entry to the destroy method. It remains on the objects after returning from destroy(). If isDestroyed is true, this property will also be true, so there is no need to test for both (for example, comp.isDestroying || comp.isDestroyed).

    • client : Widget
      READONLY
      ADVANCED
      CopyPasteBase

      The Widget which was passed into the constructor, which is the Widget we are providing extra services for.

      Has a corresponding client config.

    • Get the global LocaleHelper

    • Get the global LocaleManager

    Functions

    Functions are methods available for calling on the class
    • onClassMixedIn( )
      internal
      static
      CopyPasteBase

      This optional class method is called when a class is mixed in using the mixin() method.

    • initClass( )
      static
      ADVANCED
      CopyPasteBase

      Registers this class type with its Factory

    • Clears the clipboard data

    • copy( )
      ASYNC

      Copies selected cells to clipboard (native if accessible) to paste later

    • cut( )
      ASYNC

      Cuts selected cells to clipboard (native if accessible) to paste later

    • Internal function used to hook destroy() calls when using thisObj

    • Internal function used restore hooked destroy() calls when using thisObj

    • doDestroy( )
      internal
      Events

      Auto detaches listeners registered from start, if set as detachable

    • once( )
      private
      Events

      Internal function used to run a callback function after an event is triggered

    • Removes all listeners registered to this object by the application.

    • This will merge a feature's (subclass of InstancePlugin) keyMap with it's client's keyMap.

    Events

    Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

    Event handlers

    Event handlers are callbacks called as a result of certain actions in this class
    id: cellCopyPaste

    Source path

    Grid/feature/CellCopyPaste.js

    Contents