How To Use Kendo UI With Angular 2?

Developing an application is a common thing

nowadays, but it is the development of quick and fast
applications that tend to make you stand out from the
crowd. Nowadays in the era of web application
development, everyone wants to develop web
applications as quick as fast and Kendo gives us the
ability of fast and reliable web development.
In this article, we will learn how to use Kendo UI with
Angular 2. Before we directly jump to the topic, let’s
understand what is Kendo UI and what are the various
features of this technology? So, let’s get started…
WHAT IS KENDO UI?
Kendo UI is basically javascript based client side UI
framework. It is one of the best available jquery based
toolkit available with full angular iteration.
KENDO UI VERSIONS AVAILABLE IN THE MARKET
There are two types of versions available for Kendo UI,
which are listed and explained below:
1. Kendo UICore:
This version is open source from teleric. You don’t need
to pay anything for it. This version comes with only 24
widgets available in Core and complete mobile.
2. Kendo UIProfessional:
This version is a paid version and it comes with
complete web widgets, complete mobile widgets and
data visualization.
FEATURES OF KENDO UI
A thing is valued only when it is loaded with a bunch of
good add-ons and they are generally referred as
‘Features’. Well, Kendo UI is also loaded with a bunch
of valuable features and below is their characterization:
1. Validation:
Kendo gives you the feature of HTML5 kind of
validation and if your code is running in a browser that
doesn’t support HTML5 then you don’t need to worry
Kendo validation will work behind of it. Kendo
validation takes care of validation the way should be
2. Template:
Kendo UI provides built-in JavaScript templating engine
with Kendo UI toolkit. Templates are automatically
merged with JavaScript data at runtime. So it is easy to
use and high performance.

3. Globalization:
Kendo supports globalized scripts you can set locale
using script line such as kendo.locaization and all the
kendo controls will render its value according to locale
4. MVVM:
Kendo gives you the feature of two-way binding like
angular do. The View is automatically updated once the
model value is changed. To achieve two-way binding
there is an attribute called “rebind” we just need to
decorate the input control with “rebind” attribute.
5. Datasource:
Its a javascript data source and you can use the data
source for creating update delete operations in your
server endpoints. So you can create a data source on
your page and tell URL for reading is so and so, URL for
the insert is so and so, URL for Update is so and so and
URL for delete is so and so. All these operations will be
done by the Kendo data source out of the box.
6. Drag & Drop:
Kendo provides pre built drag and drops UI features.
that can be easily used by just including certain libraries
of Kendo.
LET’S GET STARTED…
Kendo UI supports CSS3, HTML5, Javascript, Jquery as
well as AngularJS both 1 and Angular JS 2. But in this
article, I am going to show how we can implement
kendo grid for Angular 2-

Please follow the steps give below to achieve the goal:

Step 1: Clickhere
(https://www.telerik.com/login/v2/telerik) to create a
Telerik account leave this step if you have an active
teleric account.
Step 2: Install
Node.js(https://nodejs.org/en/download/) in your
machine if it is not there.
Once you are done with the installation run node js
command prompt.
Step 3 : Enter command “npm login –
registry=https://registry.npm.telerik.com/ –
scope=@progress”
and hit enter. It will ask Telerik account username
password and email
Inline image Kendo UI
You will get below message once you are logged in
successful
Inline image Kendo UI
Step 4: Verify if the code works or not, by passing the
following command.
“npm view @progress/kendo-angular-grid versions “
The output should be as shown below.
Inline image Kendo UI
Step 5: Install the Angular-CLI package, by giving the
following command. “npm install -g angular-cli”.
Once you hit the given command it will take some time
to install the packages and once the installation is
complete you will see the messages shown in below
image.
Inline image Kendo UI
NOTE: YOU WILL GET SOME WARNINGS. YOU CAN
IGNORE THEM.
Step 6: Create a new project using the following
command “ng new KendoAngular –style=scss ”. You will
see the below message if the installation is completed
successfully.
Inline image Kendo UI
Note- Here KendoAngular is the project name, you can
write any name according to the project.

Step 7: Go to your project root folder by using

command “ cd KendoAngular “.
Step 8: Use below-given command to install UI
component
“ npm install -save @progress/kendo-angular-grid “
It will take some time to install its dependencies and
packages.
NOTE: HERE IN THE ABOVE COMMAND I AM
INSTALLING THE KENDO GRID COMPONENT BUT YOU
CAN INSTALL ANY UI COMPONENT AS PER YOUR
REQUIREMENT.
Step 9: Change the module.ts file code with the
following in src/app location.
import { BrowserModule } from ‘@angular/platform-
browser’;
import { NgModule } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;
import { GridModule } from ‘@progress/kendo-
angular-grid’;
import { HttpModule } from ‘@angular/http’;
import { AppComponent } from ‘./app.component’;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
 FormsModule,
HttpModule,
GridModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 10: Write following code in app.component.ts file
import { Component } from ‘@angular/core’;
@Component({
selector: ‘first–app‘,
template: `
<kendo-grid [data]=“Employees“>

<kendo-grid-column field=“EmployeeID“
title=“Employee ID” width=“120”>
</kendo-grid-column>
 <kendo-grid-column field=“EmployeeName“
title=“Employee Name”>
</kendo-grid-column>
<kendo-grid-column field=“Salary“
title=“Salary“ width=“230”>
</kendo-grid-column>
<kendo-grid-column field=“Designation“
title=“Designation“ width=“230”>
</kendo-grid-column>
</kendo-grid> `
})
export class AppComponent {
private students: any[] = [{
“EmployeeID“: 101,
“EmployeeName”: “Sunil Kumar“,
“Salary“: 25000,
“Designation“:‘Software Engineer’
}, {
“EmployeeID“: 102,
“EmployeeName”: “Rohit Rana“,
 “Salary“: 19000,
“Designation“: Dot Net Developer
}, {
“EmployeeID“: 103,
“EmployeeName”: “Rinku Pathak“,
“Salary“: 29000,
“Designation“: Software Engineer
}, {
“EmployeeID“: 104,
“EmployeeName”: “Sunny Goel“,
“Salary“: 15000,
“Designation“: Software Engineer
}, {
“EmployeeID“: 105,
“EmployeeName”: “Rinku Pathak“,
“Salary“: 29000,
“Designation“: Software Engineer
}, {
“EmployeeID“: 106,
 “EmployeeName”: “Ravi Gupta“,
“Salary“: 33000,
“Designation“: Software Engineer
}];
}
Step 11: Change following code in Index.html file
Index.html
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>KendoAngular</title>
<base href=“/”>
<meta name=“viewport”
content=“width=device-width, initial-scale=1”>
<link rel=“icon” type=“image/x-icon”
href=“favicon.ico”>
</head>
<body>
<first–app>Loading…</first–app>
 </body>
</html>
Step 12: Use below-given command to install the
theme.
npm install -S @telerik/kendo-theme-default
NOTE: TO INSTALL THE THEME RUN ABOVE GIVEN
COMMAND IN THE ROOT OF THE PROJECT.
Step 13: Use below-given command to add the theme
package into your project
@import “~@telerik/kendo-theme-
default/styles/packages/all”;
Step 14: Installation is now completed. Let’s now run
the application using the following command
“ng serve”
NOTE: PLEASE FOLLOW STEP 15 IF YOU GET THE
FOLLOWING ERROR GIVEN BELOW.
Inline image Kendo UI

Step 15: This is because we need to install the data

query component. We can easily overcome this error
by adding the kendo-data-query component. Add the
kendo-data-query by using the following command.
“npm install -save @progress/kendo-data-query”
Inline image Kendo UI
Now, pass the ng serve command again. The command
prompt will show below messages and run the index
page it will show the list of employees with kendo grid.
Inline image Kendo UI
CONCLUDING WORDS
So in this tutorial, we have learned what is Kendo UI,
features of Kendo, how to install Kendo with Angular
2.0, working with Kendo UI components. So far we
have learned using Kendo grid component but in my
upcoming articles, we will learn using other
components as well. Stay connected for more
updates…
Connect with source url:-
https://www.loginworks.com/blogs/use-kendo-ui-
angular-2/