Copy-Pasting DataTable Data

To enable the possibility to copy/paste DataTable data by the CTRL+C/CTRL+V keyboard shortcuts you should use parameter clipboard.

The parameter can have the following values:

  1. "block" ( or true. It's the default value);
  2. "selection";
  3. "repeat";
  4. "custom"

Each of the types has its specificity and define its behavior of copying.

Setting the desired behavior of copying

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

Related sample:  Copying between grids

"Block" copying

It's the default type and can be also specified by setting the true value.

It's can be characterized as follows:

  • When the copy area is less than the one selected, copied cells are not repeated and fill only the related selected cells.
  • When the copy area is greater than the one selected, copied cells fill not only the selected area but also the related cells nearby.

Related sample:   'block' copying

"Selection" copying

  • When the copy area is less than the one selected, copied cells are not repeated and fill only the related selected cells.
  • When the copy area is greater than the one selected, copied cells fill only the selected area and don't 'touch' the cells nearby.

Related sample:  'selection' copying

"Repeat" copying

  • When the copy area is less than the one selected, copied cells are repeated a specific number of times to fill the selected cells.
  • When the copy area is greater than the one selected, copied cells fill only the selected area and don't 'touch' the cells nearby.

Related sample:  'repeat' copying

"Custom" copying

The "custom" value allows you to specify a custom logic for the paste operation.

To apply a custom "paste" behavior to the datatable, you need to:

grid = new webix.ui({
    view:"datatable",
    ...
    clipboard:"custom"
});

This command will cancel the predefined behavior for the paste operation.

  • Specify custom logic in the onPaste event handler.
//the code does nothing but alerts messages
grid.attachEvent("onPaste", function(text) {
    webix.message("Custom paste behavior: " + text);
});

DataTable invokes the onPaste event when the user presses CTRL+V keys combination.

Related sample:  Custom clipboard (Datatable)

Back to top
If you have not checked yet, be sure to visit site of our main product Webix js frameworks and page of javascript data table product.