NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

Pasting New Items into DataTree, JavaScript Programming Example of Pasting New Items into DataTree

JavaScript Programming Example of Pasting New Items into DataTree

The sample code below shows how to add new items into DataTree. Copy the new name of the item into a text area using CTRL+C. Then select a node in DataTree and press Ctrl+V. The new text will be added as a child item of the selected node. Don't hesitate to use programming examples by Webix for your web development projects.

JS Code

var tpl = "<strong>Pasting New Items into DataTree</strong><br><br>"+
    "Press CTRL+C to copy the text in the textarea.<br>"+
	"Then select some node in DataTree and press Ctrl+V. The pasted text will be added as a child item of the selected node.";

webix.ui({
  type:"clean",
  rows:[
    {template:tpl,height:100},
    { height:200, type:"clean",
    cols:[
      {	
        view:"tree",
        width:300,
        select: true,
        clipboard: "insert",

        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}
    ]}
  ]
});