Server Paging In Kendo Grid With AngularJS And ASP.NET Web API

Here I‘m going to use the ASP.NET Web API to create a REST API service and entity framework code first approach for data access.

Create an ASP.NET Web API

Creating an ASP.NET Web API application using an installed web template in Visual Studio as in the following figures,

Creating a Model Classes

In the Solution Explorer, right click the model folder, Add-> Class and name it as Employee.

Employee.cs

public class Employee
{
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Designation { get; set; }
}

Create one more model class and name it as PagingParams

PagingParams.cs

public class PagingParams
{
public int Take { get; set; }
public int Skip { get; set; }
public int Page { get; set; }
public int PageSize { get; set; }
}

Creating WEB API Controller:

In Solution Explorer, right-click the Controller folder. Select Add -> Controller ->Web API 2 Controller-Empty name it as EmployeesController.cs,

Creating a Context class

Add one more class in the Model and name it as EmployeeContext which is our Entity framework code first context.

EmployeeContext.cs

public class EmployeeContext : DbContext
{
public EmployeeContext() : base("name=EmployeeContext")
{
}
public System.Data.Entity.DbSet<ServerPaging.Models.Employee> Employees { get; set; }
}

If you not aware of Entity framework code first approach for data access, please read here.

EmployeeController.cs

[RoutePrefix("api/Emp")]
public class EmployeesController : ApiController
{
private EmployeeContext db = new EmployeeContext();
// GET: api/Employees
public HttpResponseMessage GetEmployees([FromUri]PagingParams param)
{
var result = db.Employees;
var result_paging = result.OrderBy(e=>e.EmployeeID).Skip(param.Skip).Take(param.Take);
var Userresult = new
{
Users = result_paging,
Total = result.Count(),
};
return Request.CreateResponse(HttpStatusCode.OK, Userresult, Configuration.Formatters.JsonFormatter);
}
}

The result is used to get the list of employees from the context.

The result_paging is used to get the Employees in result based on the Pagesize using Skip and Take operator.

Here is my database as show below,

Insert 1000 records in the employee table

INSERT INTO [dbo].[Employees]
([FirstName]
,[LastName]
,[Designation])
VALUES
('Bob','Ross','Software Engineer')
GO 1000

Employees Table

Implementing the server paging in kendo grid using angularJS

Creating a HTML page

Create a new HTML page in the project.

Design:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions">
</kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.mainGridOptions = {
dataSource: {
serverPaging: true,
pageSize:50,
type: "json",
transport: {
read: {
url:"api/Employees",
type: "GET",
dataType: "json",
data:{}
},
},
schema:
{
total: "Total",
data: function (e) {
return e.Users // inspect 'e' as to where your data resides
},
model: {
id: "EmployeeID" ,
fields: {
EmployeeID: { type: "number" },
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
},
},
height:500,
pageSize: 50,
pageable: {
refresh: true,
pageSizes: [50,100,200],
},
columns: [{
field: "EmployeeID",
title: "EmployeeID",
width: "120px"
},{
field: "FirstName",
title: "First Name",
width: "120px"
},
{
field: "LastName",
title: "Last Name",
width: "120px"
}]
};
})
</script>
</body>
</html>

To enable the server paging mention the serverPaging property true in the script. Based on the pageSize the server paging will occur in the kendo grid.

Result in Browser

Request

Parameters

The parameters which are passed as a query string,