O'Reilly logo

Kendo UI Cookbook by Sagar Ganatra

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using the drag and drop feature to move elements in TreeView

In a TreeView widget, elements in the tree can be dragged-and-dropped to various levels. This is applicable not only to child elements, but also to top-level nodes in the tree.

How to do it…

To enable the drag and drop feature, specify the dragAndDrop property as true while initializing the TreeView widget, as shown in the following code snippet:

$('#treeView').kendoTreeView({
  dragAndDrop: true,
  
  dataSource: [{
    text: "Directory1",
    items: [ 
      { text: "File1.txt"}, 
      { text: "File2.txt"}
    ],
    expanded: true
  }, {
    text: "Directory2",
    items: [ 
      { text: "File3.txt"}, 
      { text: "File4.txt"}
      ]
    }, {
    text: "Directory3",
    items: [ 
      { text: "File5.txt"}, 
      { text: "File6.txt"}
      ]
    }
  ]

});

Here, when the dragAndDrop ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required