Post
Ask Question

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 { get; set; }    
  8.     public string Text { get; set; }    
  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:


Similar Articles