Drag And Drop Functionality In Kendo TreeView

Gowtham K
8y
9.5k
0
0
100
Article

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