Post
Ask Question

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,

  1. GET: api/Employees/Empdetails
  2. GET: api/Employees/Empdetails/{EmployeeID}
  3. 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: 
  1. public class Employee      
  2. {      
  3.     [Key]      
  4.     public int EmployeeId { get; set; }      
  5.     public string FullName { get; set; }      
  6.     public bool HasEmployees { get; set; }      
  7.     public int? ReportsTo { get; set; }    
  8. }    

The Employees Controller class

  1. [RoutePrefix("api/Employees")]  
  2. public class EmployeesController: ApiController  
  3. {  
  4.     private EmployeeContext db = new EmployeeContext();  
  5.     // GET: api/Employees    
  6.     [HttpGet]  
  7.     [ActionName("Empdetails")]  
  8.     public IQueryable < Employee > GetEmployees()  
  9.     {  
  10.         return db.Employees.Where(c => !c.ReportsTo.HasValue);  
  11.     }  
  12.     // GET: api/Employees/5    
  13.     [HttpGet]  
  14.     [ActionName("Empdetails")]  
  15.     [ResponseType(typeof(Employee))]  
  16.     public IHttpActionResult GetEmployee(int EmployeeId)  
  17.     {  
  18.         var employee = db.Employees.Where(c => c.ReportsTo == EmployeeId);  
  19.         if (employee == null)  
  20.         {  
  21.             return NotFound();  
  22.         }  
  23.         return Ok(employee);  
  24.     }  
  25.     [HttpPut]  
  26.     [ActionName("ChangeNode")]  
  27.     public IHttpActionResult PutEmployee(NodeChange Node)  
  28.     {  
  29.         if (Node.StartNode != null && Node.DestinationNode != null)  
  30.         {  
  31.             var personals = db.Employees.Where(m => m.FullName == Node.StartNode).First();  
  32.             var personalsParent = db.Employees.Where(m => m.FullName == Node.DestinationNode).First();  
  33.             if ((personalsParent.ReportsTo != personals.EmployeeId) && (personalsParent.ReportsTo != null))  
  34.             {  
  35.                 personals.ReportsTo = Convert.ToInt16(personalsParent.ReportsTo);  
  36.                 db.SaveChanges();  
  37.                 return Ok("Sucess");  
  38.             }  
  39.             if (personalsParent.ReportsTo == null)  
  40.             {  
  41.                 personals.ReportsTo = null;  
  42.                 // personals.HasEmployees = true;    
  43.                 db.SaveChanges();  
  44.                 return Ok("Sucess");  
  45.             }  
  46.         }  
  47.         return Ok("Not Valid Start and End Node");  
  48.     }  
  49. }  

 

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  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  8.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  9.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  10.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  11.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  12.     
  13.     <meta charset="utf-8" />  
  14. </head>  
  15. <body>  
  16.     <h3>Kendo Tree View</h3>  
  17.   
  18.     <br />  
  19.     <div id="treeview" class="demo-section"></div>  
  20. <script>  
  21. homogeneous = new kendo.data.HierarchicalDataSource({  
  22.         transport: {  
  23.             read: {  
  24.                 url: "api/Employees/Empdetails",  
  25.                 dataType: "json"  
  26.             }  
  27.         },  
  28.         schema: {  
  29.             model: {  
  30.                 id: "EmployeeId",  
  31.                 hasChildren: "HasEmployees"  
  32.             }  
  33.         }  
  34.     });  
  35.   
  36.     $("#treeview").kendoTreeView({  
  37.         dataSource: homogeneous,  
  38.         dataTextField: "FullName",  
  39.         dragAndDrop: "true",  
  40.         drop:ondrop,  
  41.     });  
  42.     function ondrop(e)  
  43.     {  
  44.         var putdata = {  
  45.             'StartNode': this.text(e.sourceNode),  
  46.             'DestinationNode': this.text(e.destinationNode)  
  47.         }  
  48.         var datajson = JSON.stringify(putdata);  
  49.   
  50.           
  51.         console.log(datajson);  
  52.   
  53.         $("#myconsole").text('');  
  54.         kendoConsole.log(this.text(e.sourceNode) + "," + this.text(e.destinationNode) )  
  55.          
  56.         var putdata = $("#myconsole").text();  
  57.         var nodeearr = putdata.split(',');  
  58.         var StartNode = nodeearr[0];  
  59.         alert(nodeearr[0]);  
  60.         var DestinationNode = nodeearr[1];  
  61.        // alert(StartNode);  
  62.   
  63.         $.ajax({  
  64.             type: 'PUT',  
  65.             url: "api/Employees/ChangeNode",  
  66.             data: { 'StartNode': StartNode, 'DestinationNode': DestinationNode },  
  67.             dataType: 'json',  
  68.             success:function(){  
  69.                 alert("sucess")  
  70.             },  
  71.             error:function(){  
  72.                 alert("OOPS")  
  73.         }  
  74.                   
  75.           
  76.         })  
  77.   
  78.     }  
  79.   
  80.   
  81.   </script>  
  82. </body>  
  83. </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.  


Similar Articles