Post
Ask Question

Data Binding Kendo Grid For Angular 2 Using ASP.NET WEB API

Introduction

This article tells about how to perform databinding of Kendo Grid for Angular 2, using ASP.NET WEB API. To explain it, I have created a RESTful get Service, using ASP.NET WEB API, which is used to load the datasource of Kendo Grid for Angular 2.

Prerequisites

Basic knowledge in ASP.NET WEB API, Kendo UI and Angular 2 framework

This article flows as follows,

  1. Creating an ASP.NET Web API Application.
  2. Creating a Controller.
  3. Testing the REST API.
  4. Creating a Kendo UI for Angular 2 Application.
  5. Implementing the DataBinding in Kendo Grid for Angular 2.

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 "EmployeeAPI"..

 
                                                     Figure 1 
 
  
                                                        Figure 2  

Creating model classes

In the Solution Explorer, right click the Models folder, select Add followed by Class and name it as Employee.cs.

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

Creating a Controller

Right click on the Controller folder and add a new Web API 2- Empty controller, as shown in the figure 3. In my case, I named it as EmployeeController.cs.

 
                                                           Figure 3 

EmployeeController.cs

  1. [RoutePrefix("api/Employee")]  
  2.     public class EmployeeController : ApiController  
  3.     {  
  4.         [HttpGet]  
  5.         [AllowAnonymous]  
  6.         [Route("EmployeeList")]  
  7.         public HttpResponseMessage GetEmployee()  
  8.         {  
  9.             try  
  10.             {  
  11.                 List<Employee> EmpLists = new List<Employee>();  
  12.                 EmpLists.Add(new Employee(1, "Govind Raj", "Business Analyst"));  
  13.                 EmpLists.Add(new Employee(2, "Krishn Mahato", "Development"));  
  14.                 EmpLists.Add(new Employee(3, "Bob Ross", "Testing"));  
  15.                 EmpLists.Add(new Employee(4, "Steve Davis", "Development"));  
  16.                 EmpLists.Add(new Employee(5, "Dave Tucker", "Infrastructure"));  
  17.                 EmpLists.Add(new Employee(6, "James Anderson", "HR"));  
  18.                 return Request.CreateResponse(HttpStatusCode.OK, EmpLists, Configuration.Formatters.JsonFormatter);  
  19.             }  
  20.             catch (Exception ex)  
  21.             {  
  22.                 return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);  
  23.             }  
  24.         }  
  25.     }  

The Employee Controller Action GetEmployee will return a list of employees.

Testing the REST API

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

  • API End Point /api/Employee/EmployeeList.
  • Type GET. 
 
                                                                 Figure 4 

Creating a Kendo UI for Angular 2 Application

Please go through my previous article to get to know how to create and configure Kendo UI for Angular 2. 

Implementing the DataBinding in Kendo Grid for Angular 2

In my previous article, we have seen how to configure Kendo Grid for Angular 2, now we are going to use the same configuration but the change is the Grid DataSource, which is populated from RESTtful Service response

Write the code, mentioned below in src/app/app.module.ts.
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { FormsModule } from '@angular/forms';  
  4. import { GridModule } from '@progress/kendo-angular-grid';  
  5. import { HttpModule } from '@angular/http';  
  6. import { AppComponent } from './app.component';  
  7.   
  8.   
  9. @NgModule({  
  10.     declarations: [  
  11.         AppComponent  
  12.     ],  
  13.     imports: [  
  14.         BrowserModule,  
  15.         FormsModule,  
  16.         HttpModule,  
  17.         GridModule,  
  18.     ],  
  19.     providers: [],  
  20.     bootstrap: [AppComponent]  
  21. })  
  22. export class AppModule { }  
Write the code, mentioned below in app.component.ts. 
  1. import { Component, ViewChild, Input, OnInit, Injectable } from '@angular/core';  
  2. import { Http } from '@angular/http';  
  3. import { Observable, BehaviorSubject } from 'rxjs/Rx';  
  4.   
  5. import {  
  6.     GridComponent,  
  7.     GridDataResult,  
  8.     DataStateChangeEvent  
  9. } from '@progress/kendo-angular-grid';  
  10.   
  11.   
  12. /* Example service */  
  13. @Injectable()  
  14. export class EmployeeService extends BehaviorSubject<GridDataResult> {  
  15.     private BASE_URL: string = 'http://localhost:1237/api/Employee/EmployeeList';  
  16.       
  17.   
  18.     constructor(private http: Http) {  
  19.         super(null);  
  20.     }  
  21.   
  22.     public query(): void {  
  23.         this.getEmployee()  
  24.             .subscribe(x =>   
  25.                 super.next(x));  
  26.     }  
  27.   
  28.       
  29.     private getEmployee(): Observable<GridDataResult>{  
  30.         return this.http  
  31.             .get(`${this.BASE_URL}`)  
  32.             .map(response => response.json())  
  33.             .map(response => (<GridDataResult>{  
  34.                 data: response,  
  35.                 total: parseInt(response.length,10)  
  36.             }));  
  37.           
  38.     }  
  39.       
  40. }  
  41. @Component({  
  42.     providers: [EmployeeService],  
  43.     selector: 'app-root',  
  44.     template: `  
  45.       <kendo-grid  
  46.           [data]="view | async"  
  47.         >  
  48.         <kendo-grid-column field="EmployeeID" width="200"></kendo-grid-column>  
  49.         <kendo-grid-column field="EmployeeName" width="200"></kendo-grid-column>  
  50.         <kendo-grid-column field="Designation"  width="500" [sortable]="false">  
  51.         </kendo-grid-column>  
  52.       </kendo-grid>  
  53.   `  
  54. })  
  55.   
  56. export class AppComponent {  
  57.     private view: Observable<GridDataResult>;  
  58.       
  59.     @ViewChild(GridComponent) private grid: GridComponent;  
  60.     constructor(private service: EmployeeService) {  
  61.         this.view = service;  
  62.         this.service.query();  
  63.     }  
  64.    
  65.   
  66. }  
From the code, mentioned above, it is obvious that Kendo Grid accesses RESTful GET Service to load its DataSource
 
Write the code, mentioned below in Index.html.
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>KendoAngular</title>  
  6.     <base href="/">  
  7.   
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  9.     <link rel="icon" type="image/x-icon" href="favicon.ico">  
  10. </head>  
  11. <body>  
  12.       
  13.     <app-root>Loading...  
  14.           
  15.     </app-root>  
  16. </body>  
  17. </html>  

Result

 
 
Conclusion

We have seen how to work with databind of Kendo Grid for Angular 2, using ASP.NET WEB API. You will learn more about paging and sorting of Kendo Grid for Angular 2 in my future articles. I hope, you have enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.

References
  1. http://www.telerik.com/kendo-angular-ui/components/grid/q
  2. http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/ 
Get the source code from GitHub.


Similar Articles