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

Question

Dimiter Topalov · Accepted Answer

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: `

#grid >


  `,
  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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

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

Xiao

Dimiter Topalov

Xiao

Jorge

Jorge

Dimiter Topalov

Jorge

Svetlin

Jorge

Dimiter Topalov