Post
Ask Question

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

  1. public class Employee  
  2. {  
  3.      public int EmployeeID { get; set; }  
  4.      public string FirstName { get; set; }  
  5.      public string LastName { get; set; }  
  6.      public string Designation { get; set; }  
  7. }  

Create one more model class and name it as PagingParams

PagingParams.cs

  1. public class PagingParams  
  2. {  
  3.     public int Take { get; set; }  
  4.     public int Skip { get; set; }  
  5.     public int Page { get; set; }  
  6.     public int PageSize { get; set; }  
  7. }   
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 

  1. public class EmployeeContext : DbContext    
  2. {    
  3.   
  4.    public EmployeeContext() : base("name=EmployeeContext")   
  5.    {  
  6.   
  7.    }   
  8.    public System.Data.Entity.DbSet<ServerPaging.Models.Employee> Employees { get; set; }  
  9.   
  10. }   

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

EmployeeController.cs  

  1. [RoutePrefix("api/Emp")]  
  2. public class EmployeesController : ApiController  
  3. {  
  4.     private EmployeeContext db = new EmployeeContext();  

  6.    // GET: api/Employees  
  7.     public HttpResponseMessage GetEmployees([FromUri]PagingParams param)  
  8.     {  
  9.         var result = db.Employees;  
  10.         var result_paging = result.OrderBy(e=>e.EmployeeID).Skip(param.Skip).Take(param.Take);  
  11.         var Userresult = new  
  12.         {  
  13.             Users = result_paging,  
  14.             Total = result.Count(),  
  15.         };  
  16.   
  17.         return Request.CreateResponse(HttpStatusCode.OK, Userresult, Configuration.Formatters.JsonFormatter);  
  18.     }  
  19. }  

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
  1. INSERT INTO [dbo].[Employees]  
  2.            ([FirstName]  
  3.            ,[LastName]  
  4.            ,[Designation])  
  5.      VALUES  
  6.            ('Bob','Ross','Software Engineer')  
  7. 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:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.     <div id="example" ng-app="KendoDemos">  
  19.         <div ng-controller="MyCtrl">  
  20.             <kendo-grid options="mainGridOptions">  
  21.   
  22.             </kendo-grid>  
  23.   
  24.   
  25.         </div>  
  26.     </div>  
  27.   
  28.     <script>  
  29.   
  30.     angular.module("KendoDemos", [ "kendo.directives" ])  
  31.         .controller("MyCtrl", function($scope){  
  32.             $scope.mainGridOptions = {  
  33.                 dataSource: {  
  34.                     serverPaging: true,  
  35.                     pageSize:50,  
  36.                     type: "json",  
  37.                     transport: {  
  38.                         read: {  
  39.                             url:"api/Employees",  
  40.                             type: "GET",  
  41.                             dataType: "json",  
  42.                             data:{}  
  43.                           
  44.                         },  
  45.                          
  46.                     },  
  47.                     schema:  
  48.                             {  
  49.                                 total: "Total",  
  50.                                 data: function (e) {  
  51.                                     return e.Users // inspect 'e' as to where your data resides  
  52.                                 },  
  53.                                 model: {  
  54.                                      id: "EmployeeID" ,  
  55.                                     fields: {  
  56.                                         EmployeeID: { type: "number" },  
  57.                                         FirstName: { type: "string" },  
  58.                                         LastName: { type: "string" }  
  59.                                     }  
  60.                                 }  
  61.                             },  
  62.                     
  63.                 },  
  64.                 height:500,  
  65.                 pageSize: 50,  
  66.   
  67.                 pageable: {  
  68.                     refresh: true,  
  69.                     pageSizes: [50,100,200],  
  70.                       
  71.                 },  
  72.                   
  73.                   
  74.                 columns: [{  
  75.                     field: "EmployeeID",  
  76.                     title: "EmployeeID",  
  77.                     width: "120px"  
  78.                     },{  
  79.                     field: "FirstName",  
  80.                     title: "First Name",  
  81.                     width: "120px"  
  82.                     },  
  83.                 {  
  84.                     field: "LastName",  
  85.                     title: "Last Name",  
  86.                     width: "120px"  
  87.                 }]  
  88.             };  
  89.   
  90.   
  91.         })  
  92.     </script>  
  93. </body>  
  94. </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,

  

 
While clicking on page 2,
 
 
I hope you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcomed.


Similar Articles