Remote Bind Kendo Grid Using AngularJS And ASP.NET WEB API

Introduction

The Kendo UI supports working with its widget using AngularJS.

This article flows as follows,

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

Creating a ASP.NET WEB API application

Create a WEB API application using an installed web template in visual studio as in the following figures:

  
                                                                  
 
 
                                                                                         
Creating model classes

In the Solution Explorer, right click the model folder, select Add, then Class and name it Employee.cs

Code in Employee.cs:

  1. public class Employee  
  2.   
  3.     {   
  4.         public Employee(int EmployeeID, string FirstName, string LastName)  
  5.     {  
  6.         this.EmployeeID = EmployeeID;  
  7.         this.FirstName = FirstName;  
  8.         this.LastName = LastName;  
  9.     }  
  10.     public int EmployeeID { get; set; }  
  11.     public string FirstName { get; set; }  
  12.     public string LastName { get; set; }  
  13. }  

Creating a Controller

Right click on the Controller folder and add a new WEB API 2- Empty controller as in the following figure 3, in my case I named it EmployeeDetailsController.cs:

  
 
Code in EmployeeDetailsController.cs:
  1. [RoutePrefix("api/EmployeeList")]  
  2. public class EmployeeDetailsController : ApiController  
  3. {  
  4.     [HttpGet]  
  5.     [Route("List")]  
  6.     public HttpResponseMessage EmployeeList()  
  7.     {  
  8.         try  
  9.         {  
  10.             List<Employee> _emp = new List<Employee>();  
  11.             _emp.Add(new Employee(1"Bobb""Ross"));  
  12.             _emp.Add(new Employee(2"Pradeep""Raj"));  
  13.             _emp.Add(new Employee(3"Arun""Kumar"));  
  14.             return Request.CreateResponse(HttpStatusCode.OK, _emp, Configuration.Formatters.JsonFormatter);  
  15.         }  
  16.         catch (Exception ex)  
  17.         {  
  18.             return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);  
  19.   
  20.         }  
  21.   
  22.   
  23.     }  
  24. }  

The above employee controller action EmployeeList will return a list of Employees.

Testing the REST API

Test the API using the POSTMAN/Fiddler as in the following figure 4:

API End Point: /api/EmployeeList/List

Type : GET 

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

Implementing the Kendo 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.               
  22.             </kendo-grid>  
  23.   
  24.   
  25.         </div>  
  26.     </div>  
  27.   
  28.     <script>  
  29.     angular.module("KendoDemos", [ "kendo.directives" ])  
  30.         .controller("MyCtrl", function($scope){  
  31.             $scope.mainGridOptions = {  
  32.                 dataSource: {  
  33.                     type: "json",  
  34.                     transport: {  
  35.                         read: "/api/EmployeeList/List"  
  36.                     },  
  37.                     pageSize: 5,  
  38.                     serverPaging: true,  
  39.                     serverSorting: true  
  40.                 },  
  41.                 sortable: true,  
  42.                 pageable: true,  
  43.                 columns: [{  
  44.                     field: "EmployeeID",  
  45.                     title: "EmployeeID",  
  46.                     width: "120px"  
  47.                     },{  
  48.                     field: "FirstName",  
  49.                     title: "First Name",  
  50.                     width: "120px"  
  51.                     },  
  52.                 {  
  53.                     field: "LastName",  
  54.                     title: "Last Name",  
  55.                     width: "120px"  
  56.                 }]  
  57.             };  
  58.   
  59.               
  60.         })  
  61.     </script>  
  62. </body>  
  63. </html>  
Result in Browser:

 
Conclusion:

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