Events In Kendo TreeView

Gowtham K
8y
6.3k
0
1

Article

To explain how to handle the events in the TreeView of Kendo UI, I’m going to use the following API's,

GET: api/employees/Empdetails
GET: api/employees/Empdetails/{EmployeeID}

If you are new to ASP.NET WEB API, please go through my previous article to get 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

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);
}

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 our API's are ready, so let us play with events in Kendo Tree View.

Events in Kendo Tree View

Change

Thi The event is fired when the selection changed by the user.

function onChange(e) {
alert("Change Event Fired");
}

Result in Browser

Collapse

This event is fired before a subgroup gets collapsed.

function onCollapse(e) {
alert("Collapsing : " + this.text(e.node));
}

Result in Browser

DataBound

This event is fired after the dataSource change event has been processed.

function onDataBound(e)
{
alert("DataBound Event Fired");
}

Result in Browser

Draging events

Drag start: Event is fired before the dragging of a node starts.

function onDragStart(e) {
console.log("Started dragging :" + this.text(e.sourceNode));
}

Drag: Triggered while a node is being dragged.

function onDrag(e) {
console.log("Dragging : " + this.text(e.sourceNode));
}

Drag End: Triggered after a node has been dropped.

function onDragEnd(e) {
console.log("Finished dragging :" + this.text(e.sourceNode));
}

Result in Browser

Expand: This event is fired before a subgroup gets expanded.

function onExpand(e) {
alert("Expanding : " + this.text(e.node));
}

Result in Browser

Select: This event is fired when a node is being selected by the user.

function onSelect(e) {
alert("Selecting : " + this.text(e.node));
}

Result in Browser

Complete code in 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>
<script src="Scripts/console.js"></script>
<meta charset="utf-8" />
</head>
<body>
<h3>Kendo Tree View</h3>
<br />
<div id="treeview" class="demo-section"></div>
<br />
<br />
<div class="box">
<div id="myconsole" class="console">
</div>
</div>
<script>
function onSelect(e) {
alert("Selecting : " + this.text(e.node));
}
function onChange(e) {
alert("Change Event Fired");
}
function onCollapse(e) {
alert("Collapsing : " + this.text(e.node));
}
function onExpand(e) {
alert("Expanding : " + this.text(e.node));
}
function onDragStart(e) {
console.log("Started dragging :" + this.text(e.sourceNode));
}
function onDrag(e) {
console.log("Dragging : " + this.text(e.sourceNode));
}
function onDragEnd(e) {
console.log("Finished dragging :" + this.text(e.sourceNode));
}
function onDataBound(e)
{
alert("DataBound Event Fired");
}
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",
drop: ondrop,
select: onSelect,
check: onCheck,
change: onChange,
collapse: onCollapse,
expand: onExpand,
dragstart: onDragStart,
drag: onDrag,
dragend: onDragEnd,
dataBound:onDataBound
});
}
</script>
</body>
</html>

There is one more event called drop event which I'm going to discuss about in more detail form in my next article with drag and drop functionality in Kendo Tree View .

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