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

Drag-and-Drop in Tree: "order" mode, programming examples of Drag-and-Drop in "order" mode in Tree

Drag-and-Drop in Tree: "order" mode Tree

'The programming example below will enable you to drag and drop items in "order" mode within a DataTree. Note that our code samples are free and can be used to create effective web applications.'

JS Code

var grida = {
  view:"treetable",
  id:"grida",
  columns:[
    { id:"id", header:"", css:{"text-align":"right"}, width:50},
    { id:"value", header:"Film title", fillspace:true,
     template:"{common.treetable()} #value#" },
    { id:"state", header:"State", width:100},
    { id:"hours", header:"Hours", width:100}
  ],
  drag:"order",
  scroll:false,
  url:"https://docs.webix.com/samples/15_datatable/31_treedrag/data/data.php", datatype:"xml"
};

var tpl = {
  template:"<b>Drag an item (DnD enabled in 'order' mode)</b>",
  height:50
};

webix.ready(function(){
  webix.ui({
    padding:10, rows:[
      tpl,
      grida
    ]
  });	
});