Is it possible to use Kendo Grid for jQuery in an Angular 6 app?

[Xiao]

Hi,

I have already had some research in KendoUI documents and also from forum threads. Basically I am migrating an Angular 1.x app to latest Angular 6, and we have a fairly complex logic to populate a jQuery Kendo Grid in our old app. I am wondering whether we can continue use this jQuery Grid and all its logic.

I have tried npm package mentioned here https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/ - which seems to be only the components that have no counterpart in the Angular suite. So grid is not in there.

I also tried to include the kendo.all.min.js file in my Angular 6 app - either in angular.json build/scripts section or directly put in a <script> tag in index.html. I have jQuery itself included through npm already, which works ok in the Angular 6 app. It is able to compile but when I try $('.selector').kendoGrid(...) I always get error saying $(...).kendoGrid is not a function.

I will be glad to provide more information if needed. Please let me know if I was doing anything wrong..

 

Thanks

[Dimiter Topalov]

Hi Xiao,

The approach for using Kendo UI for jQuery widgets in an Angular 4+ application as outlined in the mentioned documentation article, is not restricted only to widgets that do not still have their Kendo UI for Angular counterpart.

Indeed, the approach imposes an additional overhead to the application as a whole and thus is recommended primarily for scenarios where there is simply no other option (for example the developer needs a TreeList component, but one is not available). However, it can be used for other Kendo UI for jQuery widgets that already have dedicated Angular counterparts, like the Grid.

The observed error suggests that the Kendo UI for jQuery library is not properly installed and/or imported.

I prepared a sample Angular 6 application that is featuring a Kendo UI for jQuery Grid (find attached). Please compare it to your implementation and apply the necessary adjustments.

Main points of interest:

// app.component.ts file:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
// import jQuery and Kendo UI and expose a '$' on the window object for convenience

import * as $ from 'jquery';

window['$'] = window['jQuery'] = $;

import '@progress/kendo-ui';

 

@Component({

  selector: 'app-root',

  template: `

    <div #grid ></div>

  `,

  styles: []

})

export class AppComponent implements AfterViewInit {
   // obtain a reference to the Grid elementRef

  @ViewChild('grid') gridEl;

 

  public ngAfterViewInit() {
      // instantiate a Grid from the actual DOM element, wrapped in a jQuery object

    $(this.gridEl.nativeElement).kendoGrid({

      dataSource: {

          type: 'odata',

          transport: {

              read: 'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders'

          },

          schema: {

              model: {

                  fields: {

                      OrderID: { type: 'number' },

                      Freight: { type: 'number' },

                      ShipName: { type: 'string' },

                      OrderDate: { type: 'date' },

                      ShipCity: { type: 'string' }

                  }

              }

          },

          pageSize: 20,

          serverPaging: true,

          serverFiltering: true,

          serverSorting: true

      },

      height: 550,

      filterable: true,

      sortable: true,

      pageable: true,

      columns: [{

              field: 'OrderID',

              filterable: false

          },

          'Freight',

          {

              field: 'OrderDate',

              title: 'Order Date',

              format: '{0:MM/dd/yyyy}'

          }, {

              field: 'ShipName',

              title: 'Ship Name'

          }, {

              field: 'ShipCity',

              title: 'Ship City'

          }

      ]

  });

  }

}

// load the theme - angular.json file:

...
"styles": [

              {

                "input": "node_modules/@progress/kendo-theme-default/dist/all.css"

              },

              "src/styles.scss"

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Xiao]

Hi Dimiter,

Thanks for the information. Correctly importing the kendo-ui does fix my problem and my old kendoGrid is working well in the Angular app. Thanks again.

[Jorge]

Hi there!

I have a question that is somehow related.

 

We've bought the license (kendoui.for.jquery.2018.2.620.commercial) when we were using AngularJS.

Now we are thinking about moving up to Angular6. Does these files on that package work for Angular6 and if yes, what files do I need to include?

 

There is no nodejs npm package to install for those who have bought the KendoUI license?

 

Best regards!

[Jorge]

* Just noticed I repleid earlier to the wrong post *

Hi there!
I have a question that is somehow related.

We've bought the license (kendoui.for.jquery.2018.2.620.commercial) when we were using AngularJS.
Now we are thinking about moving up to Angular6. Does these files on that package work for Angular6 and if yes, what files do I need to include?

There is no nodejs npm package to install for those who have bought the KendoUI license?

Best regards!

[Dimiter Topalov]

Hello Jorge,

We recommend using the separate dedicated Kendo UI for Angular suite that consists of native Angular components built with TypeScript and Angular (it is included in your license):

https://www.telerik.com/kendo-angular-ui/components/

Further details on installing and using the components are available in the Get Started guide and the Installation section of each package's documentation, e.g.:

https://www.telerik.com/kendo-angular-ui/getting-started/#toc-project-setup

https://www.telerik.com/kendo-angular-ui/components/grid/#toc-installation

https://www.telerik.com/kendo-angular-ui/components/charts/#toc-installation

https://www.telerik.com/kendo-angular-ui/components/dropdowns/#toc-installation ... etc.

This is not related to the Kendo UI for jQuery AngularJS integration that targets AngularJS v.1.x only.

You can use Kendo UI for jQuery widgets that still do not have their Angular counterpart in the Angular application, as previously discussed in this thread, and outlined in the following documentation article:

https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/

Regards,
Dimiter Topalov
Progress Telerik

[Jorge]

Thanks fo the reply!

But I'm still confused a bit, sorry. The links you left jump to a page where you install from node package manager and talks about Angular (2,4,6) but the one we bought (Kendo UI jQuery), even though you said that this package we bought supports Angular (2,4,6).

The installation present on those links aren't related with how to add the files from my Kendo UI jQuery to my app but how to install from node package manager. Therefore, how would it know if I'm using a paid/free license?

So, is my KendoUI jQuery able to be called into my Angular (2,4,6)(not AngularJs) app without via node package manager and make things work?

 

Thanks in advance!

[Svet]

Hi Jorge,

The Kendo UI for Angular product is included in any license for Kendo UI (or one that includes Kendo UI):
https://www.telerik.com/purchase/kendo-ui

Indeed, the Kendo UI for Angular suite does not need a license to be installed from NPM, but all terms and conditions, outlined in the End User License Agreement (EULA) still apply.

This license enables holders to legally use our components in their applications, as well as to utilize our support service in accordance with their support plan.

The Angular framework itself is distributed and installed in the form of NPM packages, and as the Kendo UI for Angular components require an Angular 4+ application to be used in, they also follow similar distribution and installation mechanics.

I hope this provides some more details on the topic.

Regards,
Svetlin
Progress Telerik

[Jorge]

Hi.

 

So I can't add manually the files I have from that package and hope to make it work? (The package doesn't seem fit for Angular applications since I did try adding the files and it just throws console errors/don't have KenoUI modules to import)

I'll have to install via npm even if I've bought a license previously?

 

Thanks in advance.

[Dimiter Topalov]

Hi Jorge,

Yes, if you will be working on an Angular 4/5/6 application and will be using the Kendo UI for Angular components, the respective packages must be installed via NPM as previously discussed.

The licenses just enable the developer(s) to legally use the Kendo UI for Angular packages in their applications and benefit from the support service. Otherwise, the Kendo UI for Angular packages need to be installed via NPM so that the components, services and directives they contain can be imported and used across the application.

Regards,
Dimiter Topalov
Progress Telerik