clipboard

pro version only

This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.

Optional. Enables/disables the Clipboard module during the Grid initialization

note

The module requires the RangeSelection module to be enabled and is best used in conjunction with the BlockSelection module in the "range" mode (enabled on initialization of the Clipboard module) for convenient range selection via the UI.

Usage

clipboard?:
    | boolean
    | {
        copyModifier?: (value: any, cell: { row: object; column: object }, cut: boolean) => string;
        cutModifier?: (value: any, cell: { row: object; column: object }) => string;
        pasteModifier?: (value: any, cell: { row: object; column: object }) => any;
    };

Default value: false

Example

const grid = new dhx.Grid("grid_container", {
    columns: [
        { id: "a", header: [{ text: "A" }] },
        { id: "b", header: [{ text: "B" }] },
    ],
    data: [
        { id: "1", a: "A1", b: "B1" },
        { id: "2", a: "A2", b: "B2" },
    ],
    blockSelection: { mode: "range" }, // required for Clipboard to function (initializes automatically)
    clipboard: true // enables the Clipboard module
});

The clipboard property can be set in two ways:

as a boolean value it enables or disables the clipboard module upon the component initialization
as an object it enables the module and allows defining modifier functions for data processing. The following properties are available:
- copyModifier - (function) modifies data before copying to the clipboard. Accepts as parameters the cell value, the cell object, and the cut flag (set to true, if it's a cut operation)
- cutModifier - (function) modifies the cell data before cutting (before clearing the cell). Accepts as parameters the cell value and the cell object
- pasteModifier - (function) modifies data from the clipboard before pasting into a cell. Accepts as parameters the cell value and the cell object

The example below demonstrates the clipboard configuration with all the modifiers in use:

const grid = new dhx.Grid("grid_container", {
    columns: [
        { id: "a", header: [{ text: "A" }] },
        { id: "b", header: [{ text: "B" }] },
    ],
    data: [
        { id: "1", a: "A1", b: "B1" },
        { id: "2", a: "A2", b: "B2" },
    ],
    clipboard: {
        // adds a suffix based on the operation
        copyModifier: (value, cell, cut) => `${value}${cut ? "-cut" : "-copied"}`, 
        cutModifier: (value, cell) => `${value}-removed`, // before cutting a value
        pasteModifier: (value, cell) => value.replace("-copied", "") // removes the suffix on pasting
    }
});

Related articles:

Change log:

added in v9.2

Usage​

Change log:

Usage