Getting Started With Kendo UI for Angular

Introduction

Kendo UI is everything you need to build sites and apps with HTML5 & JavaScript. Kendo UI is a product from Progress Telerik. It helps us to build modern experiences for Web, Mobile, and Desktop applications.

Kendo UI is a bundle of four JavaScript UI libraries built natively for jQuery, Angular, React and Vue. Each is built with consistent API and theming, so no matter what you choose, your UI will be modern, responsive, accessible and fast.

In this post, we will explore how to get started with Kendo UI for Angular. Kendo UI for Angular's expertly crafted component library is the most trusted choice for building professional Angular applications. It consists of 100+ native Angular UI components and three customizable themes.

Create an Angular 14 application using Angular CLI

ng new KendoUIAngular14

Activate your Kendo UI License

Kendo UI for Angular is a professionally developed library distributed under a commercial license. As of December 2020, using any of the UI components from the Kendo UI for Angular library requires either a commercial license key or an active trial license key.

To download a license key, you need to have a developer license or trial for Kendo UI for Angular. If you already have a license or trial, please log in here. If you are new to Kendo UI for Angular, sign up for a free trial.

We can register with a valid email address.

After signing up, we must activate our Trial account using the activation link which we received in our email address. After successful activation, we can now login to the portal and download the license key for Angular.

After login to the portal, you can see a dashboard like below.

We can click the Trials tile in dashboard to see our trial licenses.

Click the Get Started link to go further actions.

We can click here to see the download link for trial license.

Copy the kendo-ui-license.txt license key file to the root folder of your application. This is the folder that has the package.json file.

Alternatively, set up a new global environment variable called KENDO_UI_LICENSE and paste the license key as a value. This approach is recommended when you do not want to have the license key in the source code.

Install @progress/kendo-licensing as a project dependency by running

npm install --save @progress/kendo-licensing

Activate the license by running

npx kendo-ui-license activate

You can see that the license is imported successfully.

Create an effective Grid with Angular Data Grid

The Kendo UI for Angular Data Grid includes a comprehensive set of ready-to-use features covering everything from paging, sorting, filtering, editing, and grouping to row and column virtualization, exporting to PDF and Excel, and accessibility support.

The Grid is built from the ground up and specifically for Angular, so that you get a high-performance control which delivers lightning-fast performance, integrates tightly with your application and with the rest of the Kendo UI for Angular components, and is highly customizable.

There are two ways to install Angular Data Grid

Automatic installation with CLI
Manual installation

In automatic installation with CLI we can use the command below.

ng add @progress/kendo-angular-grid

As a result, the ng-add command will perform the following actions:

Add the @progress/kendo-angular-grid package as a dependency to the package.json file.

Import the GridModule in the current application module.

Add all required peer dependencies to the package.json file.

Trigger npm install to install the theme and all peer packages that are added.

In manual installation, we must do all the steps ourselves sequentially.

Install the Grid package together with its dependencies by running the following command.

npm install --save @progress/kendo-angular-grid @progress/kendo-angular-dropdowns @progress/kendo-angular-treeview @progress/kendo-angular-inputs @progress/kendo-angular-dateinputs @progress/kendo-data-query @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-label @progress/kendo-drawing @progress/kendo-angular-excel-export @progress/kendo-angular-buttons @progress/kendo-angular-common @progress/kendo-angular-pdf-export @progress/kendo-angular-popup @progress/kendo-licensing

Тo add the Grid component, import the GridModule in your root module (app module) or feature module.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { GridModule } from '@progress/kendo-angular-grid';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';



@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GridModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The next step is to style the component by installing one of the available Kendo UI themes—Kendo UI Default, Kendo UI Material, or Kendo UI Bootstrap.

Default theme

npm install --save @progress/kendo-theme-default

Bootstrap theme

npm install --save @progress/kendo-theme-bootstrap

Material theme

npm install --save @progress/kendo-theme-material

After the theme package is installed, reference it in our project.

Open the angular.json file and add the theme reference under the styles section.

After successfully installed the Grid package and themes, we can add the code below in the html part of the App component.

app.component.html

<div class="page">
  <p class="title">
    Angular Data Grid example
  </p>

  <kendo-grid [kendoGridBinding]="gridView" kendoGridSelectBy="id" [(selectedKeys)]="mySelection" [pageSize]="6"
    [pageable]="true" [sortable]="true" [groupable]="false" [reorderable]="true" [resizable]="true" [height]="430"
    [columnMenu]="{ filter: true }">
    <ng-template kendoGridToolbarTemplate>
      <input [style.width.px]="200" placeholder="Search data in all columns..." kendoTextBox
        (input)="onFilter($event)" />
      <kendo-grid-spacer></kendo-grid-spacer>
    </ng-template>
    <kendo-grid-checkbox-column [width]="45" [resizable]="false" [columnMenu]="false" [showSelectAll]="true">
    </kendo-grid-checkbox-column>
    <kendo-grid-column field="name" title="Contact Name" [width]="220">
      <ng-template kendoGridCellTemplate let-dataItem>
        <div class="employee-name">{{ dataItem.name }}</div>
      </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="designation" title="Designation" [width]="220">
    </kendo-grid-column>
    <kendo-grid-column field="state" title="State" [width]="100" [resizable]="false">
    </kendo-grid-column>
    <kendo-grid-column field="address" title="Address" [width]="100" [resizable]="false">
    </kendo-grid-column>

  </kendo-grid>
</div>

Now we can add the code below to the typescript file.

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataBindingDirective } from '@progress/kendo-angular-grid';
import { process } from "@progress/kendo-data-query";
import { employees } from './employee';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'KendoUIAngular14';

  @ViewChild(DataBindingDirective) dataBinding!: DataBindingDirective;
  public gridData: unknown[] = employees;
  public gridView!: unknown[];

  public mySelection: string[] = [];

  public ngOnInit(): void {
    this.gridView = this.gridData;
  }
  
  public onFilter(input: Event): void {
    const inputValue = (input.target as HTMLInputElement).value;

    this.gridView = process(this.gridData, {
      filter: {
        logic: "or",
        filters: [
          {
            field: "name",
            operator: "contains",
            value: inputValue,
          },
          {
            field: "designation",
            operator: "contains",
            value: inputValue,
          },
          {
            field: "state",
            operator: "contains",
            value: inputValue,
          },
          {
            field: "address",
            operator: "contains",
            value: inputValue,
          },
        ],
      },
    }).data;

    this.dataBinding.skip = 0;
  }
}

We can add a few styles to the stylesheet as well.

app.component.css

.employee-name {
  display       : inline-block;
  vertical-align: middle;
  line-height   : 32px;
  padding-left  : 10px;
}

.page {
  padding: 10px;
}

.title{
  font-weight: bold;
  font-size: xx-large;
  color: cornflowerblue;
}

We have completed the coding part. We can run the application now.

Conclusion

In this post, we have seen how to get started with Kendo UI for Angular. We have seen the steps to download Kendo UI license and add license to the project. We have also seen the steps to create a data grid with Kendo UI. The Kendo UI team provides all the documentation in detail for all the components in a straightforward way. You can easily explore it.