Post
Ask Question

Kendo Detail Grid With AngularJS And ASP.NET Web API

Introduction

This article will show you how to get the kendo UI support to  work with its widget using AngularJS.

This article flow as follows,

  1. Creating an ASP.NET Web API application.
  2. Creating a Controller.
  3. Testing the REST API
  4. Implementing the Kendo Detail Grid using AngularJS with the REST API.

Create an empty Web API application using an installed web template in Visual Studio as in the following figures:

 
 
 
  

Creating a Model Classes:

In the Solution Explorer, right click the model folder, Add-> Class and name it as Department

Department.cs

  1. public class Department  
  2.     {  
  3.         [Required]  
  4.         public int DepartmentID { get; set; }  
  5.         [Required]  
  6.         public string DepartmentName { get; set; }  
  7.   
  8.        
  9.     }  

Add another class and name it Employee

Employee.cs

  1. public class Employee  
  2.     {  
  3.         
  4.         public int EmployeeID { get; set; }  
  5.         public string FirstName { get; set; }  
  6.         public string  LastName { get; set; }  
  7.         public int DepartmentID { get; set; } //Foreign Key    
  8.         public Department Department { get; set; } //Navigation Property   
  9.     }  

Creating a Context Class:

Add one more class in the Model and name it DetailGridContext which is our Entity framework code first context.

DetailGridContext.cs

  1. public class DetailGridContext : DbContext  
  2.     {  
  3.       
  4.         public DetailGridContext() : base("name=DetailGridContext")  
  5.         {  
  6.         }  
  7.   
  8.         public System.Data.Entity.DbSet<DetailGrid.Models.Department> Departments { get; set; }  
  9.   
  10.         public System.Data.Entity.DbSet<DetailGrid.Models.Employee> Employees { get; set; }  
  11.     }  
 Seed the Database:

Now, open the Package manager console and run the following commands, 

  1. Enable-migrations

    This will add the folder called migration with code file named configuration.cs 

  2. Add-Migration Initial

    Check your Web config file and ensure the SQL connection string,

    Open configuration.cs file under migration folder and add the following code in seed method,

    Configuration.cs

    1. protected override void Seed(DetailGrid.Models.DetailGridContext context)  
    2.         {  
    3.   
    4.             context.Departments.AddOrUpdate(new Department { DepartmentID = 4, DepartmentName = "Development" },  
    5.                 new Department { DepartmentID = 5, DepartmentName = "Testing" }, new Department { DepartmentID = 6, DepartmentName = "Infrastructure" });  
    6.   
    7.   
    8.   
    9.             context.Employees.AddOrUpdate(new Employee { EmployeeID = 7, FirstName = "Bob", LastName = "Ross", DepartmentID = 4 },  
    10.                 new Employee { EmployeeID = 8, FirstName = "James", LastName = "Ross", DepartmentID = 4 },  
    11.                 new Employee { EmployeeID = 9, FirstName = "Steve", LastName = "Smith", DepartmentID = 4 },  
    12.                 new Employee { EmployeeID = 10, FirstName = "Dave", LastName = "Tucker", DepartmentID = 5 },  
    13.                 new Employee { EmployeeID = 11, FirstName = "Pradeep", LastName = "Raj", DepartmentID = 6 },  
    14.                 new Employee { EmployeeID = 12, FirstName = "Shivraj", LastName = "Kumar", DepartmentID = 7 },  
    15.                 new Employee { EmployeeID = 13, FirstName = "Raja", LastName = "Sekar", DepartmentID = 7 });  
    16. }  

    3. Update-Database

    This will run the seed method,

    Check you database which is created,


         

            Department Table

             
      
            Employee Table
 
            
 
Please refer to my previous article (ASP.NET Web API With Entity Framework 6 Code First Technique - Part 1) to get more detail about Entity Framework code first technique. 

Creating WEB API Controller:

Note: Before adding the controller build your application once.

In Solution Explorer, right-click the Controller folder. Select Add -> Controller and name it DepartmentController.cs

 

DepartmentController.cs
  1. [RoutePrefix("api/Department")]  
  2. public class DepartmentsController : ApiController  
  3. {  
  4.     private DetailGridContext db = new DetailGridContext();  
  5.   
  6.   
  7.     [Route("List")]  
  8.     public IQueryable<Department> GetDepartments()  
  9.     {  
  10.         return db.Departments;  
  11.     }  
  12.   
  13.     [HttpGet]  
  14.     [Route("EmployeeDetails/{deptId}")]  
  15.     public HttpResponseMessage EmployeeDetails(int deptId)  
  16.     {  
  17.         try  
  18.         {  
  19.   
  20.             var _emp = from emp in db.Employees where emp.DepartmentID == deptId select emp;  
  21.             return Request.CreateResponse(HttpStatusCode.OK, _emp, Configuration.Formatters.JsonFormatter);  
  22.   
  23.         }  
  24.         catch (Exception ex)  
  25.         {  
  26.             return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);  
  27.         }  
  28.     }  
  29.   
  30. }  

GetDepartment action method is used to get the list of department and the EmployeeDetails action method is used to get the list of Employees based on department id.

API Test

GET: /api/Department/List – Get the Department records.

    

GET: /api/Department/EmployeeDetails/{departmentId} – Get the Employee records based on deppartment

 

The API is working fine, now it's ready to consume.

Implementing the Kendo Detail Grid using AngularJS and the REST API

Creating a HTML page

Create a new HTML page in the project.

Design: 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.     <div id="example" ng-app="KendoDemos">  
  19.         <div ng-controller="MyCtrl">  
  20.             <kendo-grid options="mainGridOptions">  
  21.                 <div k-detail-template>  
  22.                     <kendo-tabstrip>  
  23.                         <ul>  
  24.                             <li class="k-state-active">Employee information</li>  
  25.                             
  26.                         </ul>  
  27.                         <div>  
  28.                             <div kendo-grid k-options="detailGridOptions(dataItem)"></div>  
  29.                         </div>  
  30.                         
  31.                     </kendo-tabstrip>  
  32.                 </div>  
  33.             </kendo-grid>  
  34.   
  35.   
  36.         </div>  
  37.     </div>  
  38.   
  39.     <script>  
  40.     angular.module("KendoDemos", [ "kendo.directives" ])  
  41.         .controller("MyCtrl", function($scope){  
  42.             $scope.mainGridOptions = {  
  43.                 dataSource: {  
  44.                     type: "json",  
  45.                     transport: {  
  46.                         read: "/api/Department/List"  
  47.                     },  
  48.                     pageSize: 5,  
  49.                     serverPaging: true,  
  50.                     serverSorting: true  
  51.                 },  
  52.                 sortable: true,  
  53.                 pageable: true,  
  54.                 dataBound: function() {  
  55.                     this.expandRow(this.tbody.find("tr.k-master-row").first());  
  56.                 },  
  57.                 columns: [{  
  58.                     field: "DepartmentID",  
  59.                     title: "DepartmentID",  
  60.                     width: "120px"  
  61.                     },{  
  62.                     field: "DepartmentName",  
  63.                     title: "Department Name",  
  64.                     width: "120px"  
  65.                     }]  
  66.             };  
  67.   
  68.             $scope.detailGridOptions = function(dataItem) {  
  69.                 return {  
  70.                     dataSource: {  
  71.                         type: "json",  
  72.                         dataType:"GET",  
  73.                         transport: {  
  74.                             read: "/api/Department/EmployeeDetails/"+ dataItem.DepartmentID  
  75.                         },  
  76.                         serverPaging: true,  
  77.                         serverSorting: true,  
  78.                         serverFiltering: true,  
  79.                         pageSize: 5,  
  80.                     
  81.                     },  
  82.                     scrollable: false,  
  83.                     sortable: true,  
  84.                     pageable: true,  
  85.                     columns: [  
  86.                     { field: "EmployeeID", title:"ID", width: "56px" },  
  87.                     { field: "FirstName", title:"FirstName", width: "110px" },  
  88.                     { field: "LastName", title:"LastName" },  
  89.                       
  90.                     ]  
  91.                 };  
  92.             };  
  93.         })  
  94.     </script>  
  95. </body>  
  96. </html>  

From the above code it is obvious that we have injected the kendo tabstrip with the tab Employee Information. The Employee Information is populated based on the selection of department in the Grid. 

Result: 
 
  
 
  
 
 
 
 
Conclusion:

We have seen how to work with Kendo detail grid using AngularJS, which is really useful to build an application with ease. I hope you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcomed.
 
Read more articles on jQuery:


Similar Articles