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…

Jump to Section

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: Click here(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

You will get below message once you are logged in successful

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.

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.

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.

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>

<title>KendoAngular</title>

</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.

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”

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.

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…

About
Latest Posts

shobhnat

WHAT IS KENDO UI?

KENDO UI VERSIONS AVAILABLE IN THE MARKET

FEATURES OF KENDO UI

Let’s Get Started…

Note: You will get some warnings. You can ignore them.

Note: Here in the above command I am installing the Kendo grid component but you can install any UI component as per your requirement.

Note: To install the theme run above given command in the root of the project.

Note: Please follow step 15 If you get the following error given below.

CONCLUDING WORDS

Leave a Comment Cancel reply