New to Kendo UI for Angular? Start a free 30-day trial

Kendo UI for jQuery Integration

Integrating Kendo UI widgets for jQuery in an Angular application is not officially supported and has certain limitations. Using the widgets within Angular components is possible and working as expected in multiple scenarios. The developers have to rely on this integration at their own discretion.

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

To use the Kendo UI widgets for jQuery together with the Kendo UI components for Angular in Angular projects, include only components that have no counterpart in the Angular suite.

The second part of this article demonstrates how to include only what you need from the Kendo UI for jQuery suite.

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

Create a new Angular application. Follow the steps in the article on getting started.
Add the Kendo UI Default theme. It uniformly styles both the Kendo UI widgets for jQuery and the Kendo UI components for Angular.
Install Kendo UI for jQuery through NPM.
sh
```
npm install --save @progress/kendo-ui
```

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

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;

Use either @ViewChild or template reference variables to access the elements from which the Kendo UI widgets will be initialized.

html

<!-- 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;
}

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.

html

<!-- 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
    };
}

Handling the 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);
    }
}

Partially Loading Kendo UI for jQuery

The Kendo UI Custom Download tool allows to download a package that includes just the needed Kendo UI for jQuery widgets and features. That approach allows you to maintain a smaller bundle size and better performance in general.

For the full implementation of this approach, refer to the runnable sample application on GitHub that shows how to include the Kendo UI for jQuery PivotGrid in an Angular project.

Configuring the Project

Create a new Angular application. Follow the steps in the article on getting started.
Add the Kendo UI Default theme. It uniformly styles both the Kendo UI widgets for jQuery and the Kendo UI components for Angular.
Install jquery through NPM.
sh
```
npm install --save jquery
```

Downloading Custom Packages with the Needed Widgets Only

Go to Kendo UI Custom Download tool.
Check just the required PivotGrid widget with filtering and click the download button located at the bottom of the page.
Save the kendo.custom.min.js file in the assets folder of the Angular project.

Adding Downloaded Custom Package Files and jQuery

Add the files to the scripts array within the project angular.json file.

    "scripts": [
        "node_modules/jquery/dist/jquery.min.js",
        "projects/integration-jquery-partial/src/assets/kendo.custom.min.js"
    ]

Declare jQuery in the component where it will be used.
ts
```
//app.component.ts
declare var $: any;
```

Adding the PivotGrid

Use either @ViewChild or template reference variables to access the element from which the Kendo UI PivotGrid widget will be initialized.

html

    <!-- app.component.html -->
    <div #pivot></div>

// app.component.ts
export class AppComponent implements AfterViewInit {
    @ViewChild('pivot', { static: false }) pivot;

Initialize the PivotGrid widget.

// app.component.ts
import { Component, ViewChild, AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
import { products } from './products';

declare var $: any;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    @ViewChild('pivot', { static: false }) pivot;

    public pivotGrid;

    ngAfterViewInit() {
        this.pivotGrid = $(this.pivot.nativeElement).kendoPivotGrid({
            filterable: true,
            columnWidth: 120,
            height: 570,
            dataSource: {
                data: products,
                schema: {
                    model: {
                        fields: {
                            ProductName: { type: 'string' },
                            UnitPrice: { type: 'number' },
                            UnitsInStock: { type: 'number' },
                            Discontinued: { type: 'boolean' },
                            CategoryName: { field: 'Category.CategoryName' }
                        }
                    },
                    cube: {
                        dimensions: {
                            ProductName: { caption: 'All Products' },
                            CategoryName: { caption: 'All Categories' },
                            Discontinued: { caption: 'Discontinued' }
                        },
                        measures: {
                            Sum: { field: 'UnitPrice', format: '{0:c}', aggregate: 'sum' },
                            Average: { field: 'UnitPrice', format: '{0:c}', aggregate: 'average' }
                        }
                    }
                },
                columns: [{ name: 'CategoryName', expand: true }, { name: 'ProductName' }],
                rows: [{ name: 'Discontinued', expand: true }],
                measures: ['Sum']
            }
        }).data('kendoPivotGrid');
    }
}