KendoUI AngularJS
This article presents code samples and related concepts for what would it take for someone to get started with KendoUI and AngularJS. The code below is demonstrated on this page, http://hello-angularjs.appspot.com/kendoui-helloworld. Following will be discussed in this article:
Following are important CSS/JS libraries that need to be included:
Note that all of the libraries are retrieved from CDNs. Thus, you could just copy and paste below, place them within <head> tag and get started.
<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>
Pay attention to some of the following in the code below:
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());
}
};
}]);
Pay attention to Angular directive “k-options” in select element assigned to “countries” model. It asks Angular to create
elements for each data element defined in the Controller. Note that the data source for “countries” could be easily populated with a REST API call to server.
Also, note that the usage of Bootstrap CSS library. Somehow, I was unable to find good CSS classes with Kendo using which I could create a container and define form elements in a decent manner. There are CSS elements like k-separator, k-content, k-group etc, but it did not make the page look like what got easily achieved with Bootstrap. However, as I am rookie to KendoUI, please suggest if there are ways to make a great looking page with KendoUI.
The code below is demonstrated at http://hello-angularjs.appspot.com/kendoui-helloworld.
<!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">
<!-- Heading goes here -->
<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> …
[adsenseyu1]
Last updated: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…
Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…
Software-as-a-Service (SaaS) providers have long relied on traditional chatbot solutions like AWS Lex and Google…
Retrieval-Augmented Generation (RAG) is an innovative generative AI method that combines retrieval-based search with large…
The combination of Retrieval-Augmented Generation (RAG) and powerful language models enables the development of sophisticated…
Have you ever wondered how to use OpenAI APIs to create custom chatbots? With advancements…
View Comments
Prasanna, thank you so much for taking the time to put this together and answering my questions. Coming from a .net background I find it a little daunting to glue the different pieces together. Please continue to write about kendoUI/AngularJS. Best scenarios for basic authentication, jquery vs asp.net web service calls, anything to help build a real mobile application would be great as it seems like good information is so by piece meal. Any other good resources would be appreciated.