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"

In the Solution Explorer, right click the Models folder, select Add followed by Class, and name it 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;
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 figure 3. In my case, I named it as EmployeeController.cs.

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.