Post
Ask Question

How To Use The Kendo UI Component For Angular 2

Introduction

Recently, Telerik by Progress has released a beta version of the Kendo UI for Angular 2. This article will tell us how to work with Kendo UI, using Angular 2 framework.

The list of kendo UI components that support the Angular 2 Framework, is given below.

  • Grid
  • Charts
  • Dropdowns
  • Inputs
  • Layout
  • Dialog
  • Upload
  • Buttons
  • Popup
  • ScrollView
  • Sortable
  • DataQuery
  • Themes & Styling

Please check on the list of kendo UI component for Angular 2

In this article, I am going to show a demo to implement the Kendo Grid for Angular 2.

Prerequisites

We are going to setup the project using Angular CLI Tool

Configuring the Kendo UI for Angular 2

Step 1 - Accessing the Progress NPM Registry

To access it, we need to have an active Telerik account. Run the below command

npm login --registry=https://registry.npm.telerik.com/ --scope=@progress

If you don't have the Telerik account, please click here to create one.

Enter your Telerik account Username (if the username is an email address, use everything before the @), password and Email.



Once the login is successful, you will get the below message.

 

Step 2 - Verifying the code

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 3 - Adding the components

Before adding the component, we need to install the Angular-CLI package, by giving the following command.

npm install -g angular-cli

It takes some time to install the package. Once the installation is complete, you will see the message shown in the below figure. You can just skip the warning.



Step 4 - Creating a new Project

Create a new project using the following command.

ng new KendoAngular --style=scss

style=scss is used to enable the scss compiler. You will see the below message if the installation is completed successfully.



Step 5 - Go to your project root
 
Use this command to go to the root of your project.

cd KendoAngular

Step 6 - Installing UI Compoents

Now, it’s time to install the UI components. Here, I am going to install the Grid component.

npm install -save @progress/kendo-angular-grid

After a while, if your NPM login has been correct, the package and its dependencies will be installed in your project.

 

Step 7 - Changing Module Code

Change the src/app/app.module.ts with the following.
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { FormsModule } from '@angular/forms';  
  4. import { GridModule } from '@progress/kendo-angular-grid';  
  5. import { HttpModule } from '@angular/http';  
  6. import { AppComponent } from './app.component';  
  7. @NgModule({  
  8.     declarations: [  
  9.         AppComponent  
  10.     ],  
  11.     imports: [  
  12.         BrowserModule,  
  13.         FormsModule,  
  14.         HttpModule,  
  15.         GridModule, 
  16.     ],  
  17.     providers: [],  
  18.     bootstrap: [AppComponent]  
  19. })  
  20. export class AppModule { }  

Step 8

Index.html

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>KendoAngular</title>  
  6.   <base href="/">    
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.   <link rel="icon" type="image/x-icon" href="favicon.ico">  
  9. </head>  
  10. <body>  
  11.   <app-root>Loading...</app-root>  
  12. </body>  
  13. </html>  

Step 9

Change the app.component.ts:

  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.     selector: 'app-root',  
  5.     template: `  
  6.         <kendo-grid [data]="gridData">  
  7.             <kendo-grid-column field="ProductID" title="Product ID" width="120">  
  8.             </kendo-grid-column>  
  9.             <kendo-grid-column field="ProductName" title="Product Name">  
  10.             </kendo-grid-column>  
  11.             <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">  
  12.             </kendo-grid-column>  
  13.             <kendo-grid-column field="Discontinued" width="120">  
  14.                 <template kendoCellTemplate let-dataItem>  
  15.                     <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>  
  16.                 </template>  
  17.             </kendo-grid-column>  
  18.         </kendo-grid>  
  19.     `  
  20. })  
  21. export class AppComponent {  
  22.     private gridData: any[] = [{  
  23.         "ProductID": 1,  
  24.         "ProductName": "Chai",  
  25.         "UnitPrice": 18.0000,  
  26.         "Discontinued": true  
  27.     }, {  
  28.         "ProductID": 2,  
  29.         "ProductName": "Chang",  
  30.         "UnitPrice": 19.0000,  
  31.         "Discontinued": false  
  32.     }, {  
  33.         "ProductID": 3,  
  34.         "ProductName": "Aniseed Syrup",  
  35.         "UnitPrice": 10.0000,  
  36.         "Discontinued": false  
  37.     }, {  
  38.         "ProductID": 4,  
  39.         "ProductName": "Chef Anton's Cajun Seasoning",  
  40.         "UnitPrice": 22.0000,  
  41.         "Discontinued": false  
  42.     }, {  
  43.         "ProductID": 5,  
  44.         "ProductName": "Chef Anton's Gumbo Mix",  
  45.         "UnitPrice": 21.3500,  
  46.         "Discontinued": false  
  47.     }, {  
  48.         "ProductID": 6,  
  49.         "ProductName": "Grandma's Boysenberry Spread",  
  50.         "UnitPrice": 25.0000,  
  51.         "Discontinued": false  
  52.     }];  
  53. }  

Step 10 - Installing Theme

Install the theme with the following command (run in the root of the project).

npm install -S @telerik/kendo-theme-default

 

Step 11 - Importing SCSS file

Import the SCSS file that ships with the theme package in your styles.scss.  Add the below line in "styles.scss" to add the theme package for our project. 

@import "~@telerik/kendo-theme-default/styles/packages/all";

Step 12

The Installation is completed. Let's now run the application using the following command

ng serve

After the project is built, you will get the following error. 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

 

List of all installed components -

 

Now, pass the ng serve command again.



Output



Conclusion

We have seen how to configure kendo UI for Angular 2 by installing and using the kendoGrid. Will learn more Kendo UI components for Angular 2 in my future article. I hope, you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcome.

 References

  1. http://www.telerik.com/kendo-angular-ui/getting-started
  2. http://www.telerik.com/kendo-angular-ui/components/grid/q


Similar Articles