Notes

  • Demonstrates the KendoUI DropdownList widget displaying the countries
  • Pay attention to inclusion of "kendo.directives" module while instantiating kendoApp. This is very important part.
  • Pay attention to kendo.angular.min.js which defines various different kendo directives
  • Pay attention to k-options directive in select element
Copy & Paste Code for Hello World

As all the files are retrieved from CDNs, you could copy and paste the code and get started with KendoUI and AngularJS in no time.

			
<!DOCTYPE html>

<html ng-app="helloKendo">
<head>
<title>HelloKendo</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="//cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//cdn.kendostatic.com/2014.2.716/styles/kendo.flat.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="//cdn.kendostatic.com/2014.2.716/js/kendo.angular.min.js"></script>
<script>
var helloKendo = angular.module( "helloKendo", ["kendo.directives"] );
helloKendo.controller( "HelloCtrl", ['$scope', function( $scope ){
$scope.firstname = "Calvin Hobbes";
$scope.countries = {
dataSource: new kendo.data.DataSource({
data: [ "Afganistan", "India", "Ireland", "Nepal", "Pakistan", "Sri Lanka", "UK", "USA" ]
}),
optionLabel: "Select A Country",
change: function(e) {
console.log(e.sender.text());
}
};
}]);
</script>
</head>
<body ng-controller="HelloCtrl">
<div class="container">
<div class="page-header" style="margin: 0">
<!-- Remove two backslash in front of { -->
<h1>Hello, \{\{firstname }}</h1>
</div>
<div class="k-content" style="padding:20px">
<form class="form-horizontal">
<div class="form-group">
<label for="firstname" class="col-md-2 control-label">Type your name:</label>
<div class="col-md-4">
<input id="firstname" name="firstname" class="k-textbox col-md-6" ng-model="firstname" required/>
</div>
</div>
<div class="form-group">
<label for="country" class="col-md-2 control-label">Your Country:</label>
<div class="col-md-4">
<select id="country" kendo-drop-down-list k-options="countries"></select>
</div>
</div>
</form>
</div>
</div>
</body>
</html>