Server Side Paging In Kendo Grid For Angular 2 Using ASP.NET Web API

Introduction

This article explains how to perform Server-side paging 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 data source of Kendo Grid for Angular 2.

Prerequisites

Basic knowledge of 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 server side paging 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"

 

Creating model classes

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

public class Employee
  {
      public Employee(int Id, string Name, string Designation)
      {
          this.EmployeeID = Id;
          this.EmployeeName = Name;
          this.Designation = Designation;

      }
      public int EmployeeID { get; set; }
      public string EmployeeName { get; set; }
      public string Designation { get; set; }
  }

Creating a Controller

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

 

 

EmployeeController.cs

[RoutePrefix("api/Employee")]
    public class EmployeeController : ApiController
    {
        [HttpGet]
        [AllowAnonymous]
        [Route("EmployeeList")]
        public HttpResponseMessage GetEmployee(string Skip,string Take)
        {
            try
            {
                List<Employee> EmpLists = new List<Employee>();
                EmpLists.Add(new Employee(1, "Govind Raj", "Business Analyst"));
                EmpLists.Add(new Employee(2, "Krishn Mahato", "Development"));
                EmpLists.Add(new Employee(3, "Bob Ross", "Testing"));
                EmpLists.Add(new Employee(4, "Steve Davis", "Development"));
                EmpLists.Add(new Employee(5, "Dave Tucker", "Infrastructure"));
                EmpLists.Add(new Employee(6, "James Anderson", "HR"));
                var data = EmpLists.Skip(Convert.ToInt32(Skip)).Take(Convert.ToInt32(Take));
                int count = EmpLists.Count;
                return Request.CreateResponse(HttpStatusCode.OK, new { Count=count, EmployeeList=data }, Configuration.Formatters.JsonFormatter);
            }
            catch (Exception ex)
            {
                return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
            }
        }
    }

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/EmployeeListt?Skip=0&Take=5.
• Type GET.

 

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 with Server side paging.

Write the code, mentioned below, in src/app/app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { GridModule } from '@progress/kendo-angular-grid';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';


@NgModule({
    declarations: [
        AppComponent],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        GridModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Write the code, mentioned below, in app.component.ts.

import { Component, ViewChild, Input, OnInit, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { URLSearchParams, QueryEncoder } from '@angular/http';
import { Observable, BehaviorSubject } from 'rxjs/Rx';

import {
    GridComponent,
    GridDataResult,
    DataStateChangeEvent
} from '@progress/kendo-angular-grid';


/* Example service */
@Injectable()
export class EmployeeService extends BehaviorSubject<GridDataResult> {
    private BASE_URL: string = 'http://localhost:1237/api/Employee/EmployeeList';

    constructor(private http: Http) {
        super(null);
    }

    public query(state): void {
        this.getEmployee(state)
            .subscribe(x =>super.next(x));
    }


    private getEmployee(state: any): Observable<GridDataResult>{
        let params = new URLSearchParams();
        params.set('Skip', state.skip);
        params.set('Take', state.take)
        return this.http
            .get(this.BASE_URL, { search: params })
            .map(response => response.json())
            .map(response => (<GridDataResult>{
                data: response.EmployeeList,
                total: response.Count
            }));

    }

}

@Component({
    providers: [EmployeeService],
    selector: 'app-root',
    template: `
      <kendo-grid
          [data]="view | async"
          [pageSize]="pageSize"
          [skip]="skip"
          [pageable]="true"
        >
        <kendo-grid-column field="EmployeeID" width="200"></kendo-grid-column>
        <kendo-grid-column field="EmployeeName" width="200"></kendo-grid-column>
        <kendo-grid-column field="Designation"  width="500" [sortable]="false">
        </kendo-grid-column>
      </kendo-grid>
  `
})

export class AppComponent {
    private view: Observable<GridDataResult>;
    private pageSize: number = 5;
    private skip: number = 0;

    @ViewChild(GridComponent) private grid: GridComponent;
    constructor(private service: EmployeeService) {
        this.view = service;
        this.service.query({ skip: this.skip, take: this.pageSize });
    }
    public ngAfterViewInit(): void {
        this.grid.dataStateChange
            .do(({ skip, take }: DataStateChangeEvent) => {
                this.skip = skip;
                this.pageSize = take;
            })
            .subscribe(x => this.service.query(x));
    }


}

From the code, mentioned above, it is obvious that Kendo Grid accesses RESTful GET Service to load its DataSource. Pageable, pageSize and skip option of the Grid is used to enable the paging.

Write the code, mentioned below, in Index.html. 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>KendoAngular</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

    <app-root>Loading...

    </app-root>
</body>
</html>

Build and run the application by passing the command ng-server. 

The request sends to the Server when the page loads, as we initialized the value of skip and take which will be 0 and 5 respectively to load the first page

Result 

 

 

 

Kendo grid with paging in Browser

 

Click on 2 in grid pager which shown in figure 6  to load the second page

 

Conclusion

We have seen how to implement the server side paging in Kendo Grid for Angular 2, using ASP.NET WEB API. You will learn more about sorting, scroll, and selection 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.