(616) 371-1037

   [email protected]

Kendo Grid with Angular2: From Scratch

January 23, 2017 - J. Tower

No Comments

At Trailhead, we’ve been making the switch from Angular 1 to Angular 2 for our new web front-end projects. The selection of tools and components for Angular 2 has been slowly expanding, but it is still young and somewhat limited at times, which is why we’ve been very excitedly following the news from our friends at Progress (formerly Telerik) as they’ve been working on their Kendo suite of UI widgets for Angular 2.

Though still in beta, things are progressing quickly toward a May 2017 launch, so I decided to try out their latest version with Angular 2 and document the process I used for anyone else that wants to follow along.

A Word of Warning: Angular 2 uses a lot of other technologies and tools including node.js/npm, core-js, zone.js, and TypeScript. If you’re new to any/all of these technologies, there will be a bit of a learning curve at first.

Prerequisites

Before we can create our Angular app and add Kendo to it, we’ll need a few things. In this blog post I’ve made several decisions about the tools I used which you don’t have to make. In fact, you can do almost all of these things another way, but if you want to follow along with me, make sure you have the following items installed:

  1. Visual Studio Code editor
  2. Npm Package Manager
  3. An existing Telerik account (or you can sign up for a trial)

Project Creation Using Angular CLI

To create the project, I used a tool called Angular CLI (Command-Line Interface). If you don’t have it already, open a shell command window to install it using NPM.

This will globally (-g) install the Angular CLI package on your machine, meaning it will be available in any directory. You can now run this command using its simple alias of “ng” which is a common abbreviation for Angular. Navigate in your command shell to a folder where you’d like to create your new project and execute the following command, which will create the project in a subfolder called ng-kendo:

Now you can change directory to the newly created project folder:

The ng new command already should have restored your NPM packages, so now you should be able to run the application at http://localhost:4200 after running the following command:

If it worked correctly, you should see something like this in your browser.

Adding Kendo

Now that you’ve got a simple, working Angular 2 application set up, let’s add Kendo to the project. Kendo uses its own NPM registry, which you much log in to using a Progress/Telerik account to get access to these beta bits. You can enable the Progress NPM registry on your machine by associating the @progress scope with the registry URL. Run the following command in your terminal:

You’ll be prompted for a few pieces of information. If your username for your Telerik/Progress account is an email address like mine is, just use the part before the @ symbol when prompted for your username. Enter your password, and finally, when prompted, enter your full email address.

You’ve now told NPM to get @progress packages from the Telerik/Progree registry listed above whenever it encounters one on this machine.

Adding the Grid Component

With the registry set up, we’re now ready to get the Kendo components using NPM. From the command prompt, enter the following command to install all 4 required Kendo components to be able to use the Kendo grid:

This adds the latest versions of the grid, the data querying library, the kendo-angular library, and the default Kendo theme to your package.json file for you. Now tell NPM to update those packages in your project:

Open up your project in VS code. From the command prompt you can type “code .” to open the current folder in VS Code.

Under src/app, add a new TypeScript document called products.ts and paste the following sample data into it:

Now open src/app/app.module.ts and add the following lines to define the Kendo grid component:

Now open src/app/app.component.html and add the following lines to add a Kendo grid to the app’s template:

In src/app/app.component.ts, add the following lines to import the sample data and expose it as a bindable property of the component:

Now run it again with “npm start” and it should look something like this:

Looks good! We got it all now, except for some styling.

Styling the Kendo Grid

To style the grid, let’s add one line to angular-cli.json in the root directory of the project:

And now we have a styled Kendo Grid in Angular2!

I’m including the complete code for download if you’d like to see the finished product.

Share this article

J. Tower

Leave a comment

Your email address will not be published. Required fields are marked *