Copy-Pasting DataTable Data

To enable copying and pasting DataTable data by the CTRL+C/CTRL+V keyboard shortcuts you should use the clipboard parameter.

The parameter can have the following values:

• "block" (also set as true);
• "selection";
• "repeat";
• "custom"

Setting the desired behavior of copying

webix.ui({ view:"datatable", clipboard:"selection", });

Related sample:  Copying between Grids

webix.ui({ view:"datatable", clipboard:true, // or "block" });

How it works:

• If the copied area is smaller than the paste area, copied values fill cells from left to right, leaving excess cells unchanged.
• If the copied area is bigger than the paste area, copied values fill the cells in the paste area and the cells to the right and bottom of it until all values are pasted.

Related sample:  'Block' Copying

webix.ui({ view:"datatable", clipboard:"selection", });

How it works:

• If the copied area is smaller than the paste area, copied values fill cells from left to right, leaving excess cells unchanged.
• If the copied area is bigger than the paste area, copied values fill the cells only in the paste area. Excess values are not pasted anywhere.

Related sample:  'Selection' Copying

webix.ui({ view:"datatable", clipboard:"repeat", });

How it works:

• If the copied area is smaller than the paste area, copied values fill all cells in the paste area. Copied values are repeatedly copied into the excess cells until all of them are filled.
• If the copied area is bigger than the paste area, copied values fill the cells only in the paste area. Excess values are not pasted anywhere.

Related sample:  'Repeat' Copying

"custom" clipboard allows you to specify custom logic for the copy-paste operation.

grid = webix.ui({ view:"datatable", clipboard:"custom", select:"row", autoConfig:true, data:grid_data });

This will cancel the predefined behavior for the paste operation. That's why you will need to specify custom logic in the onPaste event handler. E.g.:

grid.attachEvent("onPaste", function(text) { // define your pasting logic here var sel = this.getSelectedId(true); sel.forEach(item => { this.getItem(item.row)[item.column] = "test"; this.refresh(item.row); }); });

onPaste is called when the user presses CTRL+V.

Related sample:  Custom Clipboard (Datatable)