In this article, you will learn how to perform Server-side paging in Kendo Grid for Angular 2.
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,
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.
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.
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.
Write the code, mentioned below, in app.component.ts.
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.
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
Get the source code from GitHub.
Hands-On With AngularJS Using ASP.NET