Kendo Panel Bar Using ASP.NET WEB API And Entity Framework

Introduction

This article explains how to implement remote data binding in Kendo panel bar, 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 Kendo panel bar.

Prerequisites

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

This article flows, as per the following.

1. Creating an ASP.NET Web API Application.
2. Creating a Controller.
3. Testing the REST API.
4. Creating HTML page and implementing Kendo panel bar with remote data binding

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 “KendoPanelBar".

 

Figure 1 

 

Figure 2 

Creating Model Class

Now, we will create Entity Framework models from the database tables.

Step 1

Right-click the Models folder, select Add -> ADO.NET Entity Data Model or select Add->New Item. In the Add New Item Window, select data in the left pane and ADO.NET Entity Data Model from the center pane. Name the new model file. In my case, I made it Employee, and click Add.

Step 2

In the Entity Data Model Wizard, select EF Designer from the database and click Next.

 

 

Figure 3

Step 3

Click the New Connection button. The Connection Properties Window will open.

 

Figure 4 

Step 4 

In the Connection Properties Window, provide the name of the local Server, where the database was created (in this case (DESKTOP-585QGBN)). After providing the Server name, select the Employee from the available databases and click OK.

 

Figure 5

Step 5 

You can use the default name for the connection to save the Web.Config file and click Next

 

Figure 6

Step 6

Select the table to generate models for Country, State and City table and click Finish.

 

 

Figure 7 

My database schema is shown in the figure, which is given below.

 

Figure 8 

SQL Table

 

 

Figure 9 

Creating a Controller

Create a new empty Controller. Right-click the Controllers folder and select Add –> New Empty Controller. In my case, I named it as EmplpoyeController.cs.

EmployeeController.cs

[RoutePrefix("api/Employee")]
public class EmployeeController: ApiController {
    EmployeeEntities db = new EmployeeEntities();
    [HttpGet]
    [AllowAnonymous]
    [Route("EmployeeList")]
    public HttpResponseMessage GetEmployee() {
            try {
                var Result = db.Employees.Where(e => e.ReportTo == null);
                return Request.CreateResponse(HttpStatusCode.OK, Result, Configuration.Formatters.JsonFormatter);
            } catch (Exception ex) {
                return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
            }
        }
        [HttpGet]
        [AllowAnonymous]
        [Route("EmployeeList")]
    public HttpResponseMessage GetEmployee(int ? EmployeeID) {
        try {
            if (EmployeeID == null) {
                var Result = db.Employees.Where(e => e.ReportTo == null);
                return Request.CreateResponse(HttpStatusCode.OK, Result, Configuration.Formatters.JsonFormatter);
            } else {
                var Result = db.Employees.Where(e => e.ReportTo == EmployeeID.Value);
                return Request.CreateResponse(HttpStatusCode.OK, Result, Configuration.Formatters.JsonFormatter);
            }
        } catch (Exception ex) {
            return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
        }
    }
}

 

GetEmployee Action is used to get the employee details whose report to property is equal to null. GetEmployee Action with the paramter EmployeeID is used to fetch the employee detail, which is based on their report to value.

Testing the REST API

Test API, using POSTMAN/Fiddler, as shown in the figure given below.

API End Point - /api/Employee/EmployeeList.

Type - GET.

 

Figure 10 

API End Point - /api/Employee/EmployeeList?EmployeeID=[EmployeeID]

Type - GET.

 

Figure 11 

 

Figure 12

Creating HTML page and implementing Kendo panel bar with remote data binding

Create a new HTML page in the Application, where we are going to implement Kendo panel bar. In my case, I named it PanelBar.html

PanelBar.html

<!DOCTYPE html>
<html>

<head>
    <title>Kendo Panel Bar</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>

<body>
    <h3>Kendo Panel Bar</h3>
    <div id="example">
        <div class="demo-section k-content">
            <div id="panelbar"></div>
        </div>
        <script>
            var homogeneous = new kendo.data.HierarchicalDataSource({
                transport: {
                    read: {
                        url: "/api/Employee/EmployeeList",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "EmployeeID",
                        hasChildren: "HasEmployees"
                    }
                }
            });
            $("#panelbar").kendoPanelBar({
                dataSource: homogeneous,
                dataTextField: "FirstName"
            });
        </script>
    </div>
</body>

</html>

From the code given above, it is obvious that we are using HierarchicalDataSource to implmenent the child and parent relationship, which is based on HasEmployees property value in the PanelBar.

Result in Browser

 

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