Custom Clipboard Operations with DataTree, JavaScript Programming Example of Custom Clipboard Operations with DataTree

Custom Clipboard Operations with DataTree, JavaScript Programming Example of Custom Clipboard Operations with DataTree

Try our sample code for custom clipboard operations with DataTree. This piece of code shows the behavior of the "customized" clipboard which allows users to specify a custom logic for the inserting data. See how it works: 1) When you press Ctrl+C, the data gets to the clipboard. 2) When you press Ctrl+V, DataTree invokes the onPaste event. You can handle this event to set a custom logic. By default, the handler doesn't do anything. Press CTRL+C to copy an item from the textarea. Then, select some node in DataTree and press Ctrl+V (note, in the current sample the onPaste handler just alerts messages and doesn't change DataTree items). We kindly invite you to use our coding samples for building your web applications.

JS Code

var tpl = "<strong>Custom Clipboard</strong><br><br>"+
    "The sample shows behavior of the 'custom' clipboard  which allow users to specify a custom logic for the insert operation. The mode can be characterized as follows:<br><br>"+
	"1) When you use Ctrl+C, data is copied to the clipboard.<br>"+
	"2) When you use Ctrl+V, DataTree invokes the onPaste event. You can handle this event to set a custom logic. By default the handler doesn't do anything.<br><br>" +
    "Press CTRL+C to copy an item from the textarea. Then, select some node in DataTree and press Ctrl+V (note, in the current sample the onPaste handler just alerts messages and doesn't change DataTree items)."

webix.ui({
  type:"clean",
  rows:[
    {template:tpl,autoheight:true},
    { height:200, type:"clean",
     cols:[
       {	
         view:"tree",
         id:"tree1",
         width:300,
         select: true,
         clipboard: "custom",
         data: [
           { id:"1", open:true, value:"The Shawshank Redemption", data:[
             { id:"1.1", value:"Part 1" },
             { id:"1.2", value:"Part 2" },
             { id:"1.3", value:"Part 3" }
           ]},
           { id:"2", value:"The Godfather", data:[
             { id:"2.1", value:"Part 1" },
             { id:"2.2", value:"Part 2" }
           ]}
         ]
       },
       {view:"textarea", value:"New tree item", width:300}
     ]}
  ]
});	

$$("tree1").attachEvent("onPaste", function(text) {
  webix.message("Node is pasted: " + text);
});