All Components

Kendo UI for jQuery Integration

This article demonstrates how to use widgets from Kendo UI for jQuery in an Angular application.

Overview

You can use Kendo UI widgets for jQuery along with Kendo UI components for Angular in the same application. It is recommended to apply this approach only for components that have no counterpart in the Angular suite.

The Kendo UI widgets for jQuery are not integrated with the framework. For example, Angular templates cannot be used in the configuration of the Kendo UI widgets for jQuery.

Getting Started

To use a Kendo UI widget for jQuery along with a Kendo UI component for Angular:

  1. Complete the initial setup.
  2. Add the Kendo UI widgets for jQuery.
  3. Include the Kendo UI components for Angular.

For a runnable sample application of the approach demonstrated in this article, refer to this GitHub project.

Initial Setup

  1. Create a new Angular application. Follow the steps in the article on getting started.

  2. Add the Kendo UI Default theme. It uniformly styles both the Kendo UI widgets for jQuery and the Kendo UI components for Angular.

  3. Install Kendo UI for jQuery through NPM.

    npm install --save @progress/kendo-ui
  4. Import Kendo UI for jQuery in the module where it will be used.

    import { NgModule } from '@angular/core';
    
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { GridModule } from '@progress/kendo-angular-grid';
    
    import { AppComponent } from './app.component';
    
    import '@progress/kendo-ui';
    
    @NgModule({
       declarations: [
           AppComponent
       ],
       imports: [
           BrowserModule,
           FormsModule,
           HttpModule,
           GridModule
       ],
       providers: [],
       bootstrap: [AppComponent]
    })
    export class AppModule { }

Adding the Widgets

  1. Declare kendo in the respective component.

    import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
    import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';
    
    declare var kendo: any;
  2. Use either @ViewChild or template reference variables to access the elements that the Kendo UI widgets will be initialized from.

    <!-- app.component.html -->
    <h1 #h1Element>
       {{ selectedDate | date }}
    </h1>
    <p>Change the date via the Kendo UI for jQuery DatePicker</p>
    <input #datePicker />
    // app.component.ts
    export class AppComponent implements AfterViewInit {
    
       @ViewChild('h1Element') el: ElementRef;
       @ViewChild('datePicker') datePickerEl: ElementRef;
    }
  3. Initialize the widgets.

    // app.component.ts
    import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
    import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';
    
    import '@progress/kendo-ui';
    
    declare var kendo: any;
    
    @Component({
       selector: 'app-root',
       templateUrl: './app.component.html'
    })
    export class AppComponent implements AfterViewInit {
    
       @ViewChild('h1Element') el: ElementRef;
       @ViewChild('datePicker') datePickerEl: ElementRef;
    
       selectedDate: Date = new Date();
    
       ngAfterViewInit() {
           // Using a template reference variable
           kendo.jQuery(this.el.nativeElement).css('color', 'red');
    
           // Using a template reference variable
           kendo.jQuery(this.datePickerEl.nativeElement).kendoDatePicker({
               change: (e) => {
                   this.selectedDate = e.sender.value();
               }
           });
       }
    }

Including the Components

The following example demonstrates how to create a Kendo UI Grid for Angular.

<!-- app.component.html -->
<kendo-grid
    [data]="gridView"
    [pageSize]="pageSize"
    [skip]="skip"
    [pageable]="true"
    [scrollable]="'none'"
    (pageChange)="pageChange($event)">
</kendo-grid>
// app.component.ts
private gridView: GridDataResult;

private pageSize: number = 5;
private skip: number = 0;
private products: any[] = Array(100).fill({}).map((x, idx) => ({
    "ProductID": idx,
    "ProductName": "Product" + idx,
    "Discontinued": idx % 2 === 0
}));

constructor() {
    this.loadProducts();
}

protected pageChange({ skip, take }: PageChangeEvent): void {
    this.skip = skip;
    this.pageSize = take;
    this.loadProducts();
}

private loadProducts(): void {
    this.gridView = {
        data: this.products.slice(this.skip, this.skip + this.pageSize),
        total: this.products.length
    };
}

Lifecycle

In the onDestroy event handler of the Angular component, make sure that you destroy all Kendo UI widgets for jQuery.

import { Component, ElementRef, OnDestroy } from '@angular/core';

@Component({})
export class AppComponent implements OnDestroy {

    constructor(private elementRef: ElementRef) { }

    ngOnDestroy(): void {
        kendo.destroy(this.elementRef.nativeElement);
    }
}
In this article