Webix provides support for the clipboard operations in all data-containing components. For this purpose, the library supplies the CopyPaste mixin.
By default, the support is disabled. To enable it, set the clipboard property to true :
Enabling the clipboard support
webix.ui({
view:"list",
...
clipboard: true,
});
Related sample: List: Work with Clipboard
In 3 components this mixin is already included. These components are:
If you want to work with the clipboard in any other data-containing component, you should extend it with CopyPaste class. For example, to add the support to DataView use the technique shown below:
var webix.ui({
view:"dataview",
id:"myview",
...
clipboard: true,
});
webix.extend($$("myview"),webix.CopyPaste);
To customize the way that the data will be stored in the clipboard (when the user presses CTRL+C) you should use the templateCopy property. In that case, before transfering to the clipboard the copied data will be modified according to the specified template.
To use the the templateCopy property you need to set the clipboard property to a value 'custom'.
Let's take a simple example: you have a list that displays the names of your favourite films. Assume, in the clipboard besides the film title you want to store its year and rating.
Then:
var films_set = [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2},
{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2},
{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0},
{ id:5, title:"My Fair Lady", year:1964, votes:533848, rating:8.9}
];
webix.ui({
container:"box",
view:"list",
data:films_set,
template:"#title#",
clipboard: "custom",
templateCopy: function(item) {
return item.title+" (year: "+ item.year+", rating: "+item.rating+")";
}
});
Related sample: List: Work with Clipboard
To customize the way that the data will be retrieved from the clipboard to a Webix component you should use the onPaste event.
The event fires when the user presses Ctrl+V keys combination and as a parameter, the handler function takes the text stored in the clipboard.
var films_set = [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2},
{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2},
{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0},
{ id:5, title:"My Fair Lady", year:1964, votes:533848, rating:8.9}
];
webix.ui({
view:"list",
id:"mylist",
...
clipboard: "custom"
});
$$("mylist").attachEvent("onPaste", function(text) {
text = text.split(" , ");
var sel = this.getSelectedId(true);
for (var i = 0; i < sel.length; i++) {
var item = this.getItem(sel[i]);
item.title = text[0];
item.year = text[1];
item.votes = text[2];
item.rating = text[3];
this.refresh(sel[i]);
}
});
Related sample: List: Work with Clipboard
tree.attachEvent("onPaste", function(text) {
webix.message("Node is pasted: " + text);
});
Related sample: Custom Clipboard Operations
Back to top