Remote Bind The Kendo DropDownlist Using AngularJS And ASP.NET Web API

In this article you will learn how to remote bind the Kendo dropdownlist using AngularJS and ASP.NET Web API.

Introduction:

AngularJS has become one of the most popular JavaScript frameworks today which supports building applications with ease. Now the Kendo UI also provides a support to AngularJS. This article explains to you how to integrate the Kendo UI with AngularJS with simple examples.

This is what we are going to see here,

Get Started:

Creating  ASP.NET WEB API Project

Create a simple Web API project as in the following figures:

Creating a Model Class

Right click on the model folder and add a new class, in my case I named it ColorList.cs:

Code in ColorList.cs:

  1. {    
  2.     public ColorList(int Value, string Text)    
  3.     {    
  4.         this.Value = Value;    
  5.         this.Text = Text;    
  6.     }    
  7.     public int Value { getset; }    
  8.     public string Text { getset; }    
  9. }  
Creating a Controller

Right click on the Controller folder and add a new WEB API 2- Empty controller as in the following figure 3, in my case I named it ColorController.cs:

Code in ColorController.cs

  1. [RoutePrefix("api/kendo_ang")]    
  2.     public class ColorController : ApiController    
  3.     {    
  4.             
  5.         [HttpGet]    
  6.         [Route("GetColor")]    
  7.         public HttpResponseMessage GetColorList()    
  8.         {    
  9.             try {     
  10.             List < ColorList > color= new List<ColorList>();    
  11.             color.Add(new ColorList(1, "Red"));    
  12.             color.Add(new ColorList(2, "Green"));    
  13.             color.Add(new ColorList(3, "Blue"));    
  14.          return Request.CreateResponse(HttpStatusCode.OK, color, Configuration.Formatters.JsonFormatter);    
  15.             }    
  16.     
  17.             catch(Exception ex)    
  18.             {    
  19.         return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);    
  20.             }    
  21.     
  22.         }    
  23.           
  24.     }  

The above employee controller action GetColorList will return a list of colors.

API Test

Test the API using the POSTMAN/Fiddler as in the following figure 4:

API End Point: /api/kendo_ang/GetColor

Type : GET

The API is working fine, now it's ready to consume.

Using Kendo dropdownlist with Angular JS

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>Kendo with Angular JS</title>    
  6.     
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.common.min.css">    
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.rtl.min.css">    
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.default.min.css">    
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/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.406/js/angular.min.js"></script>    
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.406/js/jszip.min.js"></script>    
  15.     <script src="http://kendo.cdn.telerik.com/2016.1.406/js/kendo.all.min.js"></script>    
  16.     
  17.     
  18. </head>    
  19. <body>    
  20.     <div id="example" ng-app="KendoDemos">    
  21.         <div class="demo-section k-content" ng-controller="MyCtrl">    
  22.             <h4 style="padding-top: 2em;">Kendo With Angular JS</h4>    
  23.             <select kendo-drop-down-list    
  24.                     k-data-text-field="'Text'"    
  25.                     k-data-value-field="'Value'"    
  26.                     k-data-source="colorDataSource"    
  27.                     style="width: 100%"></select>    
  28.         </div>    
  29.     </div>    
  30.     <script>    
  31.   angular.module("KendoDemos", [ "kendo.directives" ])    
  32.       .controller("MyCtrl", function($scope){    
  33.           $scope.colorDataSource = {    
  34.             type: "json",    
  35.                
  36.             transport: {    
  37.                 read: {    
  38.                     url: "/api/kendo_ang/GetColor",    
  39.                 }    
  40.             }    
  41.         };    
  42.     
  43.     
  44.     
  45.     
  46.       })    
  47.     </script>    
  48.     
  49. </body>    
  50. </html>  

Please make sure that you have added angular.min.js file in the project to integrate the AngularJS with Kendo UI.

Properties:

  • kendo-drop-down-list - used to define the kendo dropdownlist.
  • k-data-text-field- used to define the text field in dropdown.
  • k-data-value-field- used to define the value field in dropdown.
  • k-data-source -  used to define the dataSource for the kendo dropdownlist

Result in Browser:

Conclusion:

We have seen how to integrate the Kendo UI with Angular JS, which is really useful to build an application with ease.

References:
Read more articles on AngularJS: