ASP.NET

Kendo List View With Paging Using AngularJS With ASP.NET WEB API

This article will show you how to get the Kendo UI support to work with widget using AngularJS and ASP.NET WEB API. This article flow as follows,

  1. Creating an ASP.NET Web API application.
  2. Creating a Controller.
  3. Testing the API.
  4. Implementing the Kendo List View with paging using AngularJS with the REST API.

1.Creating a 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.     {  
  4.   
  5.         public  Employee(int Id, string Name,string Designation, string Image )  
  6.         {  
  7.             this.EmployeeID= Id;  
  8.             this.EmployeeName=Name;  
  9.             this.Designation=Designation;  
  10.             this.EmployeeImage = Image;  
  11.         }  
  12.         public int EmployeeID { get; set; }  
  13.         public string EmployeeName { get; set; }  
  14.         public string Designation { get; set; }  
  15.         public string EmployeeImage { get; set; }  
  16.   
  17.     }  

2. Creating WEB API Controller:

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

 

EmployeeController.cs 
  1. [RoutePrefix("api/Employee")]  
  2.     public class EmployeeController : ApiController  
  3.     {  
  4.         [HttpGet]  
  5.         [AllowAnonymous]  
  6.         [Route("EmployeeList")]  
  7.         public HttpResponseMessage GetEmployee()  
  8.         {  
  9.             try {   
  10.             List<Employee> EmpLists = new List<Employee>();  
  11.             EmpLists.Add(new Employee(1, "Govind Raj", "Business Analyst", "/Images/Img.png"));  
  12.             EmpLists.Add(new Employee(2, "Krishn Mahato", "Development", "/Images/Img.png"));  
  13.             EmpLists.Add(new Employee(3, "Bob Ross", "Testing", "/Images/Img.png"));  
  14.             EmpLists.Add(new Employee(4, "Steve Davis", "Development", "/Images/Img.png"));  
  15.             EmpLists.Add(new Employee(5, "Dave Tucker", "Infrastructure", "/Images/Img.png"));  
  16.             EmpLists.Add(new Employee(6, "James Anderson", "HR", "/Images/Img.png"));  
  17.             EmpLists.Add(new Employee(7, "Arun Kumar", "Testing", "/Images/Img.png"));  
  18.             EmpLists.Add(new Employee(8, "Gowtham Kumar", "Testing", "/Images/Img.png"));  
  19.                 return Request.CreateResponse(HttpStatusCode.OK, EmpLists, Configuration.Formatters.JsonFormatter);  
  20.             }  
  21.             catch(Exception ex)  
  22.             {  
  23.                 return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);  
  24.             }   
  25.         }  
  26.     }  

3. Testing the API

Test the API using the POSTMAN/Fiddler as in the following figures,

API End Point: /api/Employee/EmployeeList.

Type : GET



4. Implementing the Kendo List View with paging using AngularJS with the REST API.

Creating a HTML page

Create a new HTML page in the project.

Design:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>List View</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">  
  10.   
  11.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>  
  15. </head>  
  16. <body>  
  17.   
  18.     <div id="EmpList" ng-app="EmployeeModule">  
  19.         <div ng-controller="EmployeeCtrl">  
  20.   
  21.            <h3 style="font-style:italic;color:darkslategrey;margin-left:400px"> Kendo List View with AngularJS and ASP.NET WEBAPI</h3>  
  22.                 <div class="row" style="margin-left:400px">  
  23.                     <div class="col-sm-6">  
  24.                         <div class="demo-section k-content wide">  
  25.                             <div kendo-list-view id="listView" k-data-source="source" style="width:64.5%">  
  26.                                 <div class="Employee" k-template>  
  27.                                     <img ng-src="{{dataItem.EmployeeImage}}" alt="{{dataItem.EmployeeName}}" image" />  
  28.                                     <h3>{{dataItem.EmployeeName}}</h3>  
  29.                                     <h3>{{dataItem.Designation}}</h3>  
  30.                                 </div>  
  31.                             </div>  
  32.                         </div>  
  33.                 </div>  
  34.             </div>  
  35.             <div class="row">  
  36.                 <div class="col-sm-6" style="width:76%">  
  37.                     <div kendo-pager k-data-source="source" style="margin-left:400px"></div>  
  38.                 </div>  
  39.             </div>  
  40.   
  41.         <script type="text/x-kendo-angular-template" id="template">  
  42.         </script>  
  43.   
  44.         <style>  
  45.             #listView {  
  46.                 padding: 10px 5px;  
  47.                 margin-bottom: -1px;  
  48.                 min-height: 200px;  
  49.             }  
  50.   
  51.             .Employee {  
  52.                 float: left;  
  53.                 position: relative;  
  54.                 width: 250px;  
  55.                 height: 200px;  
  56.                 margin: 0 5px;  
  57.                 padding: 0;  
  58.             }  
  59.   
  60.              .Employee img {  
  61.             width: 150px;  
  62.             height: 150px;  
  63.         }  
  64.                 .Employee h3 {  
  65.                     margin: 0;  
  66.                     padding:  3px 5px 0 0;  
  67.                     max-width: 200px;  
  68.                     overflow: hidden;  
  69.                     line-height: 1.1em;  
  70.                     font-size: .9em;  
  71.                     font-weight: normal;  
  72.                     text-transform: uppercase;  
  73.                     color: #999;  
  74.                 }  
  75.   
  76.                 .Employee p {  
  77.                     visibility: hidden;  
  78.                 }  
  79.   
  80.   
  81.             .k-listview:after {  
  82.                 content: ".";  
  83.                 display: block;  
  84.                 height: 0;  
  85.                 clear: both;  
  86.                 visibility: hidden;  
  87.             }  
  88.         </style>  
  89.     </div>  
  90.       
  91.     </div>  
  92.     <script>  
  93.     angular.module("EmployeeModule", [ "kendo.directives" ])  
  94.         .controller("EmployeeCtrl", function($scope){  
  95.             $scope.source = new kendo.data.DataSource({  
  96.                 schema: {  
  97.                     model: {  
  98.                         id: "EmployeeID"  
  99.                     }  
  100.                 },  
  101.                 transport: {  
  102.                     read: {  
  103.                         url: "/api/Employee/EmployeeList",  
  104.                         dataType: "json"  
  105.                     },  
  106.                 },  
  107.                                pageSize: 4  
  108.             });  
  109.         })  
  110.     </script>  
  111. </body>  
  112. </html>  

Please go through my previous article to get more details on integrating the kendo UI widget with AngularJS

Result in Browser
 
Page 1: 

result

Page 2:

result
 
Conclusion:

We have seen how to work with Kendo list view with AngularJS and ASP.NET WEB API with paging, which is really useful to build an application with ease

References:

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs