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

6 posts, 1 answers
  1. Xiao
    Xiao avatar
    2 posts
    Member since:
    May 2018

    Posted 28 Aug Link to this post

    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

  2.
  3. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    899 posts

    Posted 30 Aug Link to this post

    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: {
              },
              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.
  5. Xiao
    Xiao avatar
    2 posts
    Member since:
    May 2018

    Posted 30 Aug in reply to Dimiter Topalov Link to this post

    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.

  7. Jorge
    Jorge avatar
    2 posts
    Member since:
    Nov 2017

    Posted 3 days and 6 hours ago in reply to Dimiter Topalov Link to this 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!

  8.
  9. Jorge
    Jorge avatar
    2 posts
    Member since:
    Nov 2017

    Posted 3 days and 2 hours ago in reply to Dimiter Topalov Link to this post

    * 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!

  11. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    899 posts

    Posted 1 day and 11 hours ago Link to this post

    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
    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.
Back to Top