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({   
  padding:10,
  rows:[    
    {cols:[
      {rows:[
        {template:"'Insert' mode with cell selection", height:30},
        {        
          view:"treetable",        
          columns:webix.copy(columns),
          autoheight:true,
          scrollX:false,
          select:"row",
          multiselect:true,
          clipboard:"insert",
          data: webix.copy(data)
        }
      ]},
      {width:13},
      {
        rows:[
          {template:"'Block' mode with cell selection"},
          {
            view:"treetable",
            columns:webix.copy(columns),
            autoheight:true,
            scrollX:false,
            select:"row",
            multiselect:true,
            clipboard:"selection",
            data: webix.copy(data)
          }
        ]
      }
    ]},
    {height:13},
    {cols:[
      {
        rows:[
          { template:"'Selection' mode with row selection", height:30 },
          {
            view:"treetable",
            columns:webix.copy(columns),
            autoheight:true,
            scrollX:false,
            select:"cell",
            multiselect:true,
            clipboard:"block",
            data: webix.copy(data)
          }
        ]
      },
      {width:13},
      {       
        rows:[
          { template:"'Repeat' mode with column selection", height:30 },
          {
            view:"treetable",
            columns:webix.copy(columns),
            autoheight:true,
            scrollX:false,
            select:"column",
            multiselect:true,
            clipboard:"repeat",
            data: webix.copy(data)
          }
        ]
      }
    ]}
  ]
});