Categories: JavascriptUI

Hello World with KendoUI & AngularJS – Code Example

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:

  • Key CSS/JS libraries from KendoUI and AngularJS
  • AngularJS Code Representing Inclusion of Kendo.Directives Module
  • Take away code to get started quickly

 

Key CSS/JS KendoUI & AngularJS Libraries

Following are important CSS/JS libraries that need to be included:

  • kendo.common.min.css: This is KendoUI common CSS file that gets used across different themes.
  • kendo.default.min.css (Web Themes): This represents default web theme for KendoUI. One could use some of the following available themes. All that is required to be done with CSS is include file in this format: kendo.<themename>.min.css
    • Flat
    • Metro
    • MetroBlack
    • Uniform
    • Default
    • Bootstrap
    • MoonLight
    • Silver
    • HighContrast
    • Textures
    • Black
    • BlueOpal
  • jquery.min.js: This is JQuery JS library which is key for KendoUI widgets to work.
  • kendo.all.min.js: This is Kendo JS library required for different KendoUI widgets
  • angular.min.js: This is core AngularJS JS library.
  • kendo.angular.min.js: This is AngularJS library by KendoUI defining kendo directives

 

Code Snippets Representing Above Libraries

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>

 

AngularJS Code Representing Inclusion of Kendo.Directives Module

Pay attention to some of the following in the code below:

  • Dependency on “kendo.directives” module when loading helloKendo App.
  • Model “countries” defined on $scope object which is used to populate the Kendo DropDownList widget in the view. Within the “countries” variable defination, note that definition of dataSource, optionLabel, change variable in JSON format
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());
      }
    };
}]);

 

Hello World Code Example with KendoUI & AngularJS

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]

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

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.

Share
Published by
Ajitesh Kumar

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

1 month ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

1 month ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

2 months ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

2 months ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

2 months ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

2 months ago