Kendo UI TreeList Remote DataBinding With ASP.NET MVC 5 Using ASP.NET WEB API

Introduction

 

In my previous article, I discussed how to work with Kendo UI TreeList basic features. Now, this article will demonstrate you how to construct the Kendo TreeView with complex JSON object, which is the response of the REST API developed using ASP.NET Web API using Entity Framework.Okay! Let us move forward.

 

Prerequisites 

• Visual Studio
• SQL Server
• Basic knowledge of ASP.NET MVC
• Basic knowledge of ASP.NET Web API
• Basic knowledge of Entity Framework
• Basic knowledge of jQuery
• Basic knowledge of CSS

 

Article Flow 

• Create a table in a database with dummy values.
• Create an ASP.NET Web API Empty project
• Configure Entity Framework with ASP.NET Web API 
• Create Controller with data Load Logic using Entity Framework in ASP.Net Web API 
• Test the API Response using POSTMAN
  
• Create an ASP.NET MVC Empty project
• Create a Controller and View
• Enable Kendo UI Features
• Kendo Remote Binding in view

Create a table in database with dummy values

 

First, we will create a table in SQL Server to populate a Kendo UI TreeList with data in ASP.NET MVC. I have created a table "Employee" with the following design.

 

 

 

Execute the below query to create a table with the above design. 

CREATE TABLE [dbo].[Employee](
[ID] [bigint] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](150) NULL,
[Designation] [nvarchar](150) NULL,
[Location] [nvarchar](50) NULL,
[TeamLeader] [bigint] NULL,
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
(
   [ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

And, insert a few employee records like below.

 

 

 

 Execute the below query to get the same records.

GO
SET IDENTITY_INSERT [dbo].[Employee] ON
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Location], [TeamLeader]) VALUES (1, N'Gnanavel Sekar', N'Software Engineer', N'Chennai', 4)
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Location], [TeamLeader]) VALUES (2, N'Robert Bellar', N'Software Engineer', N'Chennai', 4)
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Location], [TeamLeader]) VALUES (3, N'Muthu A', N'Software Engineer', N'Chennai', 4)
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Location], [TeamLeader]) VALUES (4, N'Ramar Ammavasi', N'Sr.Software Engineer', N'Chennai', NULL)
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Location], [TeamLeader]) VALUES (5, N'Gokul D', N'Sr.Software Engineer', N'Coimbatore', NULL)
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Location], [TeamLeader]) VALUES (6, N'Karthick', N'Software Engineer', N'Coimbatore', 5)
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Location], [TeamLeader]) VALUES (7, N'Sharma', N'Software Engineer', N'Coimbatore', 5)
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Location], [TeamLeader]) VALUES (8, N'Sheriff', N'Software Engineer', N'Coimbatore', 5)
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Location], [TeamLeader]) VALUES (9, N'Anand s', N'Software Engineer', N'Coimbatore', 5)
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Location], [TeamLeader]) VALUES (10, N'Mubarak', N'Software Engineer', N'Coimbatore', 5)
GO
SET IDENTITY_INSERT [dbo].[Employee] OFF
GO

Create an ASP.NET Web API Empty project

 

 To create an ASP.NET WEB API empty project, follow the below steps one by one. Here, I have used Visual Studio 2013.

 

Steps :  

1.  Select New Project -> Visual C# -> Web -> ASP.NET Web Application and enter your application name. Here, I named it "KendoServices". Now, click OK.
2. Select Empty Web API template and click OK to create the project. 
3. Once you click OK, the project will be created with the basic architecture of ASP.NET WEB API 

 

Configure Entity Framework with ASP.NET Web API

 

 Here, I already discussed how to configure and implement database first approach. In the meantime choose our created table with entity framework, once we did our configuration with SQL table "Employee" from CRUD database and with our application you will get the below screen as succeeding configuration. 

 

 

 

Create Controller with data Load Logic using Entity Framework in ASP.Net Web API

 

Add an Empty Controller and name it as "KendoServicesController" and load data from database using entity framework to write the below codes to in KendoServices controller.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using KendoServices.Models;
namespace KendoServices.Controllers {
    public class KendoServicesController: ApiController {
        [ResponseType(typeof(IEnumerable < Employee > ))]
        [System.Web.Http.Route("api/GetAllEmployees")]
        public HttpResponseMessage GetAllEmployees() {
            CSharpCornerEntities entity = new CSharpCornerEntities();
            var result = entity.Employees.ToList();
            return GetResultResponse(result);
        }
        /// <summary>
        /// Get Response for Each result
        /// </summary>
        /// <param name="Result"></param>
        /// <returns></returns>
        public HttpResponseMessage GetResultResponse(object Result) {
            HttpResponseMessage response = null;
            try {
                response = Request.CreateResponse(HttpStatusCode.OK, Result);
            } catch (Exception ex) {
                response = Request.CreateResponse(HttpStatusCode.InternalServerError, Result);
            }
            return response;
        }
    }
}

Now Run your service

 

 

If you are getting any error in ASP.NET Web API service, Please refer this Link 

 

Test the API Response using POSTMAN

 

As you can see from the image below it has provided the success response by listing all employee details

 

 

 

Create an ASP.NET MVC Empty project

 

To create ASP.NET MVC empty project, follow the below steps one by one. Here, I have used Visual Studio 2013.

• Select New Project -> Visual C# -> Web -> ASP.NET Web Application and enter your application name. Here, I named it "KendoServices".Now, click OK.
• Then, select Empty ASP.Net MVC template and click OK to create the project.
• Once you click OK, the project will be created with the basic architecture of MVC.If you are not aware of how to create an Empty ASP.NET Web Application, please visit Step 1 and Step 2 to learn.
• Once you complete these steps you will get the screen as below

 

 Create a Controller and View

 

Now, create an empty Controller and View. Here, I created a Controller with the name of "KendoTreeListController". Whenever we create an empty Controller, it is created with empty Index action method. Also, create an empty View to this action method "Index".

 

Enable Kendo UI Features

 

Here, we are going to enable the Kendo UI features with our application by adding the below CSS and JS in our shared _Layout View. 

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

 Kendo Remote Data Binding in view

 

Add the below code to do the remote data binding. In the below code, you can see that the URL is mentioned with ASP.NET Web API service route.

var dataSource = new kendo.data.TreeListDataSource({
    transport: {
        read: {
            url: "http://localhost:42612/api/GetAllEmployees",
            dataType: "json"
        }
    },
    schema: {
        model: {
            id: "ID",
            parentId: "TeamLeader",
            fields: {
                TeamLeader: {
                    field: "TeamLeader",
                    nullable: true
                },
            }
        }
    }
});

For a clear view, see the below image.

 

 

 

dataSource - The data source of the Kendo TreeView should be a hierarchical data source and it is constructed based on our complex JSON object from API.

 

Now, run your API services and application.

 

 

 

Application Code 

 

Complete View 

@ {
    ViewBag.Title = "Kendo-TreeList";
} < body > < div id = "example" > < div id = "treelist"
style = "width:610px" > < /div> < script id = "photo-template"
type = "text/x-kendo-template" > < div class = 'employee-photo'
style = 'background-image: url(../Content/Employees/#:data.ID#.jpg); ' > < /div> < div class = 'employee-name' > #: Name# < /div> < /script> < script > $(document).ready(function() {
    var dataSource = new kendo.data.TreeListDataSource({
        transport: {
            read: {
                url: "http://localhost:42612/api/GetAllEmployees",
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "ID",
                parentId: "TeamLeader",
                fields: {
                    TeamLeader: {
                        field: "TeamLeader",
                        nullable: true
                    },
                }
            }
        }
    });
    $("#treelist").kendoTreeList({
        dataSource: dataSource,
        height: 500,
        filterable: true,
        sortable: true,
        columns: [{
            field: "Name",
            expandable: true,
            title: "Employee Name",
            width: 230,
            template: $("#photo-template").html()
        }, {
            field: "Designation",
            title: "Designation",
            width: 200
        }, {
            field: "Location"
        }]
    });
}); < /script> < style > .employee - photo {
        display: inline - block;
        width: 32 px;
        height: 32 px;
        border - radius: 50 % ;
        background - size: 32 px 35 px;
        background - position: center center;
        vertical - align: middle;
        line - height: 32 px;
        box - shadow: inset 0 0 1 px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.employee-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</div>
</body>

_Layout.cshtml 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Kendo TreeList</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> @Html.ActionLink("Kendo TreeList Remote DataBinding using ASP.NET Web API in MVC5", "Index", "Home", null, new { @class = "navbar-brand" }) </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav"></ul>
            </div>
        </div>
    </div>
    <div class="container body-content"> <br /> @RenderBody()
        <hr /> </div>
</body>

</html>

RouteConfig.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace KendoTreeListRemoteDataBinding {
    public class RouteConfig {
        public static void RegisterRoutes(RouteCollection routes) {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {
                controller = "KendoTreeList", action = "Index", id = UrlParameter.Optional
            });
        }
    }
}

API Code - Complete Controller 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using KendoServices.Models;
namespace KendoServices.Controllers {
    public class KendoServicesController: ApiController {
        [ResponseType(typeof(IEnumerable < Employee > ))]
        [System.Web.Http.Route("api/GetAllEmployees")]
        public HttpResponseMessage GetAllEmployees() {
            CSharpCornerEntities entity = new CSharpCornerEntities();
            var result = entity.Employees.ToList();
            return GetResultResponse(result);
        }
        /// <summary>
        /// Get Response for Each result
        /// </summary>
        /// <param name="Result"></param>
        /// <returns></returns>
        public HttpResponseMessage GetResultResponse(object Result) {
            HttpResponseMessage response = null;
            try {
                response = Request.CreateResponse(HttpStatusCode.OK, Result);
            } catch (Exception ex) {
                response = Request.CreateResponse(HttpStatusCode.InternalServerError, Result);
            }
            return response;
        }
    }
}

WebApiConfig.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace KendoTreeListRemoteDataBinding {
    public class RouteConfig {
        public static void RegisterRoutes(RouteCollection routes) {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {
                controller = "KendoTreeList", action = "Index", id = UrlParameter.Optional
            });
        }
    }
}

Here, we have created an empty project so it cannot get built in CSS. So, I have attached the respective CSS under a Content folder with employee static photos and referred it to a project. Refer to the attached project for reference. I did attach the demonstrated application and API project. The API project is attached without package for Entity Framework 6.0 due to the size limit.

Summary 

 

We have seen how to construct the Kendo tree view with complex JSON object using ASP.NET Web API and Entity Framework in ASP.NET MVC Web Application.

 

I hope it will help you out. Your valuable feedback and comments about this article are always welcome.