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

Migration Guide from jQuery to Angular

Kendo UI is a component library built natively for four technologies - jQuery, Angular, React, and Vue. In this migration guide, you will find more details on how to migrate common features and functionalities from Kendo UI for jQuery to Kendo UI for Angular components and the main differences between both suites.

Prerequisites

Each Kendo UI flavor has certain prerequisites which need to be done before you can start using the components.

Installing jQuery vs Angular Libraries

jQuery InstallationAngular Installation
There are several ways to start using jQuery. You can:
  • Download the jQuery library from the official jQuery documentation.
  • If you don't want to download and host jQuery yourself, include it from a CDN (Content Delivery Network).
  • Install Node.js. For more information see nodejs.org. The Node.js installation will also install the NPM package manager.
  • Install the Angular CLI globally using the already installed NPM package manager. The Angular CLI is a command-line interface tool that helps you initialize, build and maintain Angular projects. See the Angular documentation for more details.

Installing the Kendo Suites

Kendo UI for jQueryKendo UI for Angular
jQuery controls can be downloaded as a whole package that includes all widgets, or you can skip some of the Kendo UI utilities and install only what your application requires. You can check the First Steps with Kendo UI for jQuery article.Kendo UI for Angular uses component based architecture and component packages are installed separately. You can check the Getting Started with Kendo UI for Angular article. In addition, all of the Kendo UI for Angular component packages contain a Getting Started section that provides all information, needed to install and start using the component. Refer to the Getting Started of the Grid.

Activating Your License key

Both suites, require an active trial or commercial license.

jQueryAngular
As of the R2 2022 release, using any of the Kendo UI for jQuery components from the NPM distribution channel requires a script license registration. Depending on the license type you own, you can register an active trial license or a commercial license key. You can check this article to learn more on how to set up the license key using jQuery.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. You can check this article to learn more on how to activate your license key in Angular application.

Versioning

Kendo UI for jQuery and Kendo UI for Angular suites track the components and frameworks changes differently.

jQuery VersionsAngular Components Versions
The Kendo UI for jQuery releases a single version at the end of each quarter and service packs that include new widgets, improvements, and bug fixes. This allows you to install all updates and widgets at once. For more details refer to the Kendo UI for jQuery Release History.The Kendo UI for Angular releases the components independently and their version numbers follow the rules of Semantic Versioning. Each package has its own change log section which contains information about the released versions. For more details check the Change Log section of the Grid.

Working with API

The API sections of both suites are in different places.

Kendo UI for jQuery APIKendo UI for Angular component API
The Kendo UI for jQuery API is placed on top of the side navigation bar. Kendo UI for jQuery - API The Kendo UI for Angular API is defined per package. It is in the side navigation bar, at the bottom of the section, dedicated to the respective package. Kendo UI for Angular Label - API

Data Binding

Kendo UI for jQuery widgets utilize JSON configuration objects, while the Kendo UI for Angular components use the mechanics of the Angular framework, and most configuration options are passed as input properties.

Let's define a basic Grid component and compare both implementations.

Binding Kendo UI for jQuery Grid

You can bind local or remote data using the dataSource.data property of the Grid, or utilize the Kendo UI DataSource component as a mediator between the Grid and the underlying data. The DataSource plays a central role in all web applications built with Kendo UI for jQuery. The columns are defined by setting the columns property of the Grid to a columns configuration array.

Using the dataSource.data property.

<script>
    $(document).ready(function() {
        $("#grid").kendoGrid({
            dataSource: {
                data: products,
            },
            columns: [
                { field: "ProductName", title: "Name"},
                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                { field: "UnitsInStock", title: "Units In Stock", width: "130px" }
            ]
        });
    });
</script>

Using the Kendo UI DataSource component.

<script>
$(document).ready(function () {
    var service = "https://demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
          data: products,
        });
    $("#grid").kendoGrid({
        dataSource: dataSource,
        columns: [
            { field: "ProductName", title:"Name"},
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" }],
    });
});
</script>

The products collection comes from the following content source:

<script src="../content/shared/js/products.js"></script>

Binding Kendo UI for Angular Grid

All data-bound Kendo UI for Angular components provide a built-in data property that expects the data collection or an object representing the component data.

You can bind local or remote data to the Grid through the built-in data property of the component or set the built-in binding directive which helps you implement common data operations with less code. You can check the difference between using the data property and the binding directive.

The columns can be defined in several ways. Refer to the Columns Definition section for more information.

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridData">
            <kendo-grid-column field="ProductName" title="Name"> </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" title="Price" format="{0:c}" [width]="130"> </kendo-grid-column>
            <kendo-grid-column field="UnitsInStock" title="Units In Stock" [width]="130"> </kendo-grid-column>
        </kendo-grid>
    `
})

The gridData is a field in the component containing the objects array.

export class AppComponent {
    public gridData: Product[] = [
        {
            ProductID: 1,
            ProductName: 'Chai',
            UnitPrice: 18,
            UnitsInStock:5,
            Category: {
                CategoryID: 1,
                CategoryName: 'Beverages'
            }
        },
        ...
    ];
}

Defining Templates

The templates help you customize different parts of a component according to the project requirements, allowing you to take full control over the content.

Using jQuery

Depending on the widget and the part that needs customization, the widgets expose different properties like template, headerTemplate, valueTemplate, and others.

For example, you can customize the Kendo UI for jQuery Grid cell values by setting the template property to:

  • string that wraps the value in HTML.

    <script>
        $("#grid").kendoGrid({
          columns: [ {
            field: "First Name",
            template: "<strong>#: name # </strong>"
          }],
          dataSource: [ { name: "Jane" }, { name: "John" } ]
        });
    </script>
  • function that is returned by kendo.template.

    <script id="name-template" type="text/x-kendo-template">
        <strong>#: name #</strong>
    </script>
    <script>
    $("#grid").kendoGrid({
      columns: [ {
        field: "First Name",
        template: kendo.template($("#name-template").html())
      }],
      dataSource: [ { name: "Jane" }, { name: "John" } ]
    });
    </script>
  • function that returns a string.

    <script>
    $("#grid").kendoGrid({
      columns: [ {
        field: "First Name",
        template: function(dataItem) {
          return "<strong>" + kendo.htmlEncode(dataItem.name) + "</strong>";
        }
      }],
      dataSource: [ { name: "Jane" }, { name: "John" } ]
    });
    </script>

Using Angular

To define a template you must use the <ng-template> tag. This allows you to take full control over the rendered content in the respective component section.

For example, you can customize the header and footer of a Grid column by applying the kendoGridHeaderTemplate and kendoGridFooterTemplate directives on the <ng-template> tag.

<kendo-grid [data]="gridData">
    <kendo-grid-column field="ProductName" title="Name">
        <ng-template kendoGridHeaderTemplate>
            Custom title
        </ng-template>
        <ng-template kendoGridFooterTemplate>
            Custom footer
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

The templates of each Kendo UI for Angular component are documented in a separate article providing further details and examples of their usage. For reference check the Column Templates of the Grid.

All templates of a certain component can be found in its API section. The following screenshot highlights all templates of the Grid.

Kendo UI for Angular Grid- Column Templates