Working With Kendo UI TreeList And Custom Template In ASP.NET MVC 5 Web Application

Introduction

 

 In this article, I will demonstrate how to work with KendoTreeList View and create a custom template with KendoTreeList in ASP.NET MVC5 using Kendo UI and EF. After going through with this article, you may get the benefit of KendoTreeList's rich features. Okay! let's move forward.

 

Prerequisites  

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

Article Flow 

• Create a table in database with dummy values
• Create an ASP.NET MVC Empty project
• Configure Entity Framework with database and application
• Create a Controller and View
• Enable Kendo UI Features
• Custom Template with TreeList

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 MVC Empty project  

 

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

1. Select New Project -> Visual C# -> Web -> ASP.NET Web Application and enter your application name. Here, I named it as "KendoTreeListView".
2. Now, click OK.
3. Then, select Empty MVC template and click OK to create the project.
4. Once you click OK, the project will be created with the basic architecture of MVC.
5. 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.

 

Configure Entity Framework with database and application

 

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

 

 

 

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. And, 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>

Now, write the logic in a Controller to load the employee(s) from a database using Entity Framework. Add the below code to load it.

[HttpGet]
public JsonResult LoadEmployeesData() {
    using(CSharpCornerEntities Entities = new CSharpCornerEntities()) {
        var employees = Entities.Employees.ToList();
        return Json(employees, JsonRequestBehavior.AllowGet);
    }
}

And now, create a div in the View which will act as TreeList.

<div id="treelist" style="width:610px"></div>

Now, call the LoadEmployeesData action method to bind the data to TreeList Datasource.

<script>
    $(document).ready(function() {
        $("#treelist").kendoTreeList({
            dataSource: {
                transport: {
                    read: {
                        url: "http://localhost:28655/KendoTreeList/LoadEmployeesData",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "ID",
                        parentId: "TeamLeader",
                        fields: {
                            TeamLeader: {
                                field: "TeamLeader",
                                nullable: true
                            },
                        },
                        expanded: true
                    }
                }
            },
            height: 500,
            filterable: true,
            sortable: true,
            columns: [{
                field: "Name",
                title: "Employee Name",
                width: 200
            }, {
                field: "Designation",
                title: "Designation",
                width: 200
            }, {
                field: "Location"
            }]
        });
    });
</script>

Detailed Description

 

$("#treelist").kendoTreeList() -> Here, we are enabling the Kendo UI TreeList to div "treelist" and it will act as the KenoTreeList.

dataSource: { transport: {read: { -> This Transport helps us to read the data from the desired services.

Here, we are loading the data from our MVC controller. In the above code, you can see that we mentioned the URL of our action.

The next parameter says what type of data we are reading and binding to the data source. Schema models represent which field will act as the parent for others. Here, we mentioned the parent field as Team Leader. Columns represent the fields need to be displayed in Kendo TreeList.

 

Run your application.

 

Expand

 

 

 

Sortable and Filterable 

 

In the above code, you can see that we have enabled these features by setting true.

 

 

 

Now, let's add the employee photos with the names using Kendo custom template.

 

Custom Template with TreeList

 

We will append the employee photos based on database ID column, and I have copied static images to the physical folder under a content folder named Employees. 

 

  

 

Add the below Kendo Template in your View. In the below code, you can see that we are appending the employee photos from Employees folder under content folder from the server. Whenever we get the data into the template, we need to use the data as an object and # for column representation.

<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>

Now, append this photo template with columns. In the below code, you can see that we mentioned appending with Employee name and rest of the things are same as earlier. 

columns: [{
    field: "Name",
    title: "Employee Name",
    width: 230,
    template: $("#photo-template").html()
}, {
    field: "Designation",
    title: "Designation",
    width: 200
}, {
    field: "Location"
}]

Add the below CSS to give rich looks to your Photo template 

<style>
    .employee-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #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>

Now, run your application.

 

 

 

Complete View _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 UI TreeList with ASP.NET MVC5 and EF", "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>

Index.cshtml 

@ {
    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() {
    $("#treelist").kendoTreeList({
        dataSource: {
            transport: {
                read: {
                    url: "http://localhost:28655/KendoTreeList/LoadEmployeesData",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    id: "ID",
                    parentId: "TeamLeader",
                    fields: {
                        TeamLeader: {
                            field: "TeamLeader",
                            nullable: true
                        },
                    },
                    expanded: true
                }
            }
        },
        height: 500,
        filterable: true,
        sortable: true,
        columns: [{
            field: "Name",
            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>

Complete Controller 

using KendoTreeListView.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace KendoTreeListView.Controllers {
    public class KendoTreeListController: Controller {
        //
        // GET: /KendoTreeList/
        public ActionResult Index() {
                return View();
            }
            [HttpGet]
        public JsonResult LoadEmployeesData() {
            using(CSharpCornerEntities Entities = new CSharpCornerEntities()) {
                var employees = Entities.Employees.ToList();
                return Json(employees, JsonRequestBehavior.AllowGet);
            }
        }
    }
}

RouteConfig.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace KendoTreeListView {
    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 can not get built-in CSS. I have attached the respective CSS under Content folder and referred it to a project. Refer to the attached project for reference and I did attach the folders such as content, View, Controller and Model.

 

Summary 

 

In this article, we discussed how to work with TreeList in our ASP.NET MVC5 web application using Kendo UI and Entity Framework.

I hope it's helpful. Your valuable feedback and comments about this article are always welcome.