Drag And Drop Functionality In Kendo TreeView

To explain how to implement the drag and drop functionality in the TreeView of kendo UI, I’m going to use the following API's,

GET: api/Employees/Empdetails
GET: api/Employees/Empdetails/{EmployeeID}
PUT: api/Employees/ChangeNode

The above GET API’s are used to bind the employees details and the PUT API is used to update the Employee order in the TreeView

If you are new to ASP.NET WEB API, please go through my previous article to know how to create a RESTful API using ASP.NET WEB API with Entity Framework.

The Employee model class in the project:

public class Employee
{
[Key]
public int EmployeeId { get; set; }
public string FullName { get; set; }
public bool HasEmployees { get; set; }
public int? ReportsTo { get; set; }
}

The Employees Controller class

[RoutePrefix("api/Employees")]
public class EmployeesController: ApiController
{
private EmployeeContext db = new EmployeeContext();
// GET: api/Employees
[HttpGet]
[ActionName("Empdetails")]
public IQueryable < Employee > GetEmployees()
{
return db.Employees.Where(c => !c.ReportsTo.HasValue);
}
// GET: api/Employees/5
[HttpGet]
[ActionName("Empdetails")]
[ResponseType(typeof(Employee))]
public IHttpActionResult GetEmployee(int EmployeeId)
{
var employee = db.Employees.Where(c => c.ReportsTo == EmployeeId);
if (employee == null)
{
return NotFound();
}
return Ok(employee);
}
[HttpPut]
[ActionName("ChangeNode")]
public IHttpActionResult PutEmployee(NodeChange Node)
{
if (Node.StartNode != null && Node.DestinationNode != null)
{
var personals = db.Employees.Where(m => m.FullName == Node.StartNode).First();
var personalsParent = db.Employees.Where(m => m.FullName == Node.DestinationNode).First();
if ((personalsParent.ReportsTo != personals.EmployeeId) && (personalsParent.ReportsTo != null))
{
personals.ReportsTo = Convert.ToInt16(personalsParent.ReportsTo);
db.SaveChanges();
return Ok("Sucess");
}
if (personalsParent.ReportsTo == null)
{
personals.ReportsTo = null;
// personals.HasEmployees = true;
db.SaveChanges();
return Ok("Sucess");
}
}
return Ok("Not Valid Start and End Node");
}
}

SQL Table

GET: api/Employees/Empdetails response,

From the above image it is clear that the api/Employees/Empdetails API gives you the details of employees who doesn’t have the report to value,

GET:api/Employees/Empdetails/{EmployeeId} response.

From the above image it is clear that the api/Employees/Empdetails/{EmployeeId} API gives you the details of employee who have the report to value by filtering it with EmployeeID which is send through the request.

Now we are going to see how to implement the Kendo TreeView using the dynamic data binding to the data source as well as the drag and drop functionality in it, create HTML page in the project, in my case I named it TreeView.html.

Now, let us design the UI to use these API's.

Tree View with drag and drop functionality

TreeView.Html

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<h3>Kendo Tree View</h3>
<br />
<div id="treeview" class="demo-section"></div>
<script>
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "api/Employees/Empdetails",
dataType: "json"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});
$("#treeview").kendoTreeView({
dataSource: homogeneous,
dataTextField: "FullName",
dragAndDrop: "true",
drop:ondrop,
});
function ondrop(e)
{
var putdata = {
'StartNode': this.text(e.sourceNode),
'DestinationNode': this.text(e.destinationNode)
}
var datajson = JSON.stringify(putdata);
console.log(datajson);
$("#myconsole").text('');
kendoConsole.log(this.text(e.sourceNode) + "," + this.text(e.destinationNode) )
var putdata = $("#myconsole").text();
var nodeearr = putdata.split(',');
var StartNode = nodeearr[0];
alert(nodeearr[0]);
var DestinationNode = nodeearr[1];
// alert(StartNode);
$.ajax({
type: 'PUT',
url: "api/Employees/ChangeNode",
data: { 'StartNode': StartNode, 'DestinationNode': DestinationNode },
dataType: 'json',
success:function(){
alert("sucess")
},
error:function(){
alert("OOPS")
}
})
}
</script>
</body>
</html>

From the script you can observe that the ondrop functionality is used to fetch the start and destination node and sent it through the PUT API (api/Employees/ChangeNode) request.

The ChangeNode Action method in the controller is responsible for manipulating the nodes position in the TreeView.

Result In Browser

Initial TreeView without drag and drop

Drag and drop the Pradeep Kumar (Start Node) to Steve Smith (Destination Node).

Change in SQL Table

Drag and drop Pradeep Kumar (Start Node) to Arun Karthick (Destination Node).

Change in SQL Table

Drag and Drop Raja Sekar (Start Node) from Steve Smith (Parent Node) to independent node / Parent Node

Change in SQL Table

I hope you enjoyed this article. Your valuable feedback, question, or comments about this article are always welcomed.

17 Comments

Join the conversation! Your thoughts help the community grow.

Shweta Shukla9y ago
Where you defined node changes in velow code: [HttpPut] [ActionName("ChangeNode")] public IHttpActionResult PutEmployee(NodeChange Node) { }
Arul R10y ago
Thanks for nice article
Sanjay Kumar10y ago
Nice
- Gowtham K10y ago
  Thank You
Ankit Bansal10y ago
Thanks for sharing
- Gowtham K10y ago
  Thank You
Gowtham Rajamanickam10y ago
good article..
Gowtham Rajamanickam10y ago
good article..
- Gowtham K10y ago
  Thank You
Shridhar Sharma10y ago
nice share
- Gowtham K10y ago
  Thank You
Santhakumar Munuswamy10y ago
Thanks for nice article
- Gowtham K10y ago
  Thank You
Raja T10y ago
Nice, Thanks for sharing
- Gowtham K10y ago
  Thank You
Kumaresh Rajalingam10y ago
Good one sir
- Gowtham K10y ago
  Thank You