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. {
  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. }
  17. catch(Exception ex)
  18. {
  19. return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
  20. }
  22. }
  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>
  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">
  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>
  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",
  36. transport: {
  37. read: {
  38. url: "/api/kendo_ang/GetColor",
  39. }
  40. }
  41. };
  46. })
  47. </script>
  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: