Kendo UI for jQuery Integration

You can use the Kendo UI widgets for jQuery along with Kendo UI components for Angular in the same application.

To use the Kendo UI widgets for jQuery together with Kendo UI components for Angular in Angular projects, include only 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.

Sample Project

For the full implementation of this approach in the sample project, refer to the runnable sample application on GitHub.

Setting Up the Project

1. Create a new Angular application. Follow the steps in the article on [getting started]({{ site.baseurl }}/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.

   Copy Codenpm install --save @progress/kendo-ui

4. Import Kendo UI for jQuery in the module where it will be used.

   Copy Codeimport { 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.

   Copy Codeimport { 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.

   Copy Code<!-- app.component.html -->
   <h1 #h1Element>
       {{ selectedDate | date }}
   </h1>
   <p>Change the date via the Kendo UI for jQuery DatePicker</p>
   <input #datePicker />

   Copy Code// app.component.ts
   export class AppComponent implements AfterViewInit {
   
       @ViewChild('h1Element') el: ElementRef;
       @ViewChild('datePicker') datePickerEl: ElementRef;
   }

3. Initialize the widgets.

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

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

Copy Code// 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
    };
}

Handling the Lifecycle

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

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

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

    constructor(private elementRef: ElementRef) { }

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

Suggested Links

• GitHub Project on Integrating Kendo UI for Angular and Kendo UI for jQuery
• Documentation and API Reference on Kendo UI for jQuery
• Kendo UI for Angular on StackOverflow
• Frequently Asked Question on Kendo UI for Angular
• Reporting Bugs, Sharing Feedback, or Submitting Issues on Kendo UI for Angular