KendoTreeList View Using ASP.NET WEB API

Introduction

This article explains how to implement the KendoTreeList View, using ASP.NET Web API application. To explain it, I have created a RESTful GET Service, using ASP.NET Web API, which is used to load the DataSource of KendoTreeList.

Prerequisites

Basic knowledge of ASP.NET Web API, jQuery, and Kendo UI.

This article flows as per the following.

Creating an ASP.NET Web API application.
Creating a Controller.
Testing the REST API.
Creating an HTML page and implementing the Kendo Tree List View.

Creating an ASP.NET WEB API Application

Create a Web API application using an installed Web template in Visual Studio, as shown below. In my case, I named the application as “KendoTreeList".

Figure 1

Figure 2

Creating Model Class

In the Solution Explorer, right click on Models folder, select "Add" followed by "Class", and name it as Employee.cs.

Employee.cs

public class Employee
{
public Employee(int Id, string Name, string Designation,int? ReportTo )
{
this.EmployeeID = Id;
this.EmployeeName = Name;
this.Designation = Designation;
this.ReportTo = ReportTo;
}
public int EmployeeID { get; set; }
public string EmployeeName { get; set; }
public string Designation { get; set; }
public int? ReportTo { get; set; }
}

Creating a Controller

Right click on the Controllers folder and add a new "Web API 2- Empty Controller", as shown in the Figure 3. In my case, I named it as "EmployeeController.cs".

Figure 3

EmployeeController.cs

[HttpGet]
[AllowAnonymous]
[Route("EmployeeList")]
public HttpResponseMessage GetEmployee()
{
try
{
List<Employee> EmpLists = new List<Employee>();
EmpLists.Add(new Employee(1, "Govind Raj", "Business Analyst", null));
EmpLists.Add(new Employee(2, "Krishn Mahato", "Development", 1));
EmpLists.Add(new Employee(3, "Bob Ross", "Testing", 1));
EmpLists.Add(new Employee(4, "Steve Davis", "Development", 1));
EmpLists.Add(new Employee(5, "Dave Tucker", "Infrastructure", 1));
EmpLists.Add(new Employee(6, "James Anderson", "HR", 1));
return Request.CreateResponse(HttpStatusCode.OK, EmpLists, Configuration.Formatters.JsonFormatter);
}
catch (Exception ex)
{
return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
}
}

Employee Controller Action GetEmployee will return a list of the employees.

Testing the REST API

Test the API using POSTMAN/Fiddler, as shown in Figure 4.

API End Point /api/Employee/EmployeeList.
Type GET.

Figure 4

Creating a HTML page

Create one new HTML page in the application, where we are going to implement the kendoTreeList view, using the RESTful Service. In my case, I named it as TreeListView.html.

Implement the KendoTreeList

The kendoTreeList view enables the display of self-referencing tabular data and allow sorting filtering and editing. We can use an empty div tags and initialize the TreeViewList settings from the script.

Write the below code in TreeListView.html.

TreeListView.html

<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: "api/Employee/EmployeeList",
dataType: "json"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportTo",
fields: {
EmployeeID: { type: "number", nullable: false },
ReportTo: { field: "ReportTo", nullable: true }
}
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
columns: [
{ field: "EmployeeName", expandable: true, title: "Employee Name", width: 250 },
{ field: "Designation", title: "Designation" },
]
});
});
</script>
</div>
</body>
</html>

More or less, the setting for both kendoGrid and kendoTreeList is the same, where in kendoTreeList View the data object will contain both Id and Parent Id to describe the hierarchy of items. From our response, the ReportTo will act as ParentId which is used to form the hierarchy.

Result

Figure 5

Figure 6

Now, let us change the value of ReportTo in the Controller to form a different hierarchy.

EmployeeController.cs

[HttpGet]
[AllowAnonymous]
[Route("EmployeeList")]
public HttpResponseMessage GetEmployee()
{
try
{
List<Employee> EmpLists = new List<Employee>();
EmpLists.Add(new Employee(1, "Govind Raj", "Business Analyst",null));
EmpLists.Add(new Employee(2, "Krishn Mahato", "Development",1));
EmpLists.Add(new Employee(3, "Bob Ross", "Testing",1));
EmpLists.Add(new Employee(4, "Steve Davis", "Development",6));
EmpLists.Add(new Employee(5, "Dave Tucker", "Infrastructure",6));
EmpLists.Add(new Employee(6, "James Anderson", "HR",null));
return Request.CreateResponse(HttpStatusCode.OK, EmpLists, Configuration.Formatters.JsonFormatter);
}
catch (Exception ex)
{
return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
}
}

Now, the employee Krishna Mahato and Bob Ross will be under Govind Raj and Steve Davis; Dave Tucker will be under James Anderson respectively.

Result

Figure 7

Filtering and Sorting in Kendo TreeListView

Enable the filtering and sorting in the kendoTreeList View, by setting the filterable and sortable as "True".

TreeListView.html

<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<h3>Kendo TreeList View using remote data </h3>
<br />
<br />
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: "api/Employee/EmployeeList",
dataType: "json"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportTo",
fields: {
EmployeeID: { type: "number", nullable: false },
ReportTo: { field: "ReportTo", nullable: true }
}
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
filterable: true,
sortable:true,
columns: [
{ field: "EmployeeName", expandable: true, title: "Employee Name", width: 250 },
{ field: "Designation", title: "Designation" },
]
});
});
</script>
</div>
</body>
</html>

Result

Figure 8

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