Different Copy-Paste Modes in TreeTable
JavaScript Programming Example of Different Copy-Paste Modes in TreeTable

JavaScript Different Copy-Paste Modes in TreeTable

A TreeTable allows convenient data storage. Different JavaScript copy-paste modes ensure easy information copying and pasting in a TreeTable. The coding sample below shows how to let users copy and paste rows, cells, and columns with data. Feel free to use programming examples by Webix.

JS Code

var columns = [
  { id:"id",	header:"", css:{"text-align":"right"},  	width:50},
  { id:"value",	header:"Film title",	fillspace:true,
   template:"{common.treetable()} #value#" },
  { id:"chapter",	header:"Mode"}
];

var data = [
  { "id":"1", "value":"The Shawshank Redemption", "open":true, "data":[
    { "id":"1.1", "value":"Part 1", "chapter":"alpha"},
    { "id":"1.2", "value":"Part 2", "chapter":"beta", "open":true, "data":[
      { "id":"1.2.1", "value":"Part 1", "chapter":"beta-twin"},
      { "id":"1.2.2", "value":"Part 1", "chapter":"beta-twin"}
    ]},
    { "id":"1.3", "value":"Part 3", "chapter":"gamma" }
  ]},
  { "id":"2", "value":"The Godfather", "data":[
    { "id":"2.1", "value":"Part 1", "chapter":"alpha" },
    { "id":"2.2", "value":"Part 2", "chapter":"beta" }
  ]}
];

webix.ui({   
  view: "scrollview",
  scroll: "y",
  body: {
    rows:[    
      {cols:[
        {rows:[
          {template:"<br><b>Insert</b> mode. Items are pasted as children.", height:54},
          {        
            view:"treetable",        
            columns:webix.copy(columns),
   			scroll: "y",
            select:"row",
            multiselect:true,
            clipboard:"insert",
            data: webix.copy(data)
          }
        ]},
        {width:13},
        {
          rows:[
            {template:"<br><b>Block</b> mode. Copied values fill cells fill all the cells available.", height: 54},
            {
              view:"treetable",
              columns:webix.copy(columns),
              scroll: "y",
              minHeight: 300,
              select:"row",
              multiselect:true,
              clipboard:"selection",
              data: webix.copy(data)
            }
          ]
        }
      ]},
      {height:13},
      {cols:[
        {
          rows:[
            { template:"<br><b>Selection</b> mode. Copied values fill the cells only in the paste area.", height:54 },
            {
              view:"treetable",
              columns:webix.copy(columns),
              minHeight: 300,
              scroll: "y",
              select:"cell",
              multiselect:true,
              clipboard:"block",
              data: webix.copy(data)
            }
          ]
        },
        {width:13},
        {       
          rows:[
            { template:"<br><b>Repeat</b> mode. Copied values are repeatedly copied into the cells.", height:54 },
            {
              view:"treetable",
              columns:webix.copy(columns),
              scroll: "y",
              select:"column",
              multiselect:true,
              clipboard:"repeat",
              data: webix.copy(data)
            }
          ]
        }
      ]}
    ]
  }
});