Copy-Pasting Tree Data

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

The parameter can have one of 3 values:

  1. 'modify' (or true. It's the default value);
  2. 'insert';
  3. 'custom'.

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

Setting the desired behavior of copying

tree = webix.ui({
    view:"tree",
    clipboard:"insert"
});

Related sample:  Pasting New Items

'Modify' copying

It's the default type, you can also set it to true.

This mode works like this:

  • When you copy the selected node in the tree, you copy the node title (doesn't matter if it's a parent or a child node);
  • When you paste the text to the tree, it will be pasted as the title of the selected node.

Setting the 'modify' behavior of copying

tree = webix.ui({
    view:"tree",
    clipboard:true
});

Related sample:  Pasting Titles of Tree Items

'Insert' copying

  • When you copy the selected node in the tree, you copy the node title (doesn't matter whether it's a parent or a child node);
  • When you paste the text to the tree, it will be added as a child item of the selected node.

Setting the 'insert' behavior of copying

tree = webix.ui({
    view:"tree",
    clipboard:"insert"
});

Related sample:  Pasting New Items

Custom copying

Mode 'custom' allows you to specify custom logic for pasting.

To apply custom 'paste' behavior to the tree:

var tree = webix.ui({
    view:"tree",
    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
tree.attachEvent("onPaste", function(text) {
    webix.message("Node is pasted: " + text);
});

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

Related sample:  Custom Clipboard Operations

Back to top