How can I configure my Angular 6 environment to be able to use Kendo UI grid for jQuery inside Angular 6?

0
votes

Let me please ask the question : how I need to configure webpack for CLI Angular 2+ (currently I am using Angular 6) to use Kendo UI grid for jQuery inside Angular 6?

My problem is that I added in Angular 6 project two files : kendo.all.min.js and jquery-1.12.4.min.js

added in html file 

<div id="grid"></div>

Inside typescript component I added imports :

import * as kendo from '../../../../assets/kendo.all.min.js';
import * as jQuery from '../../../../assets/jquery-1.12.4.min.js';


  ngOnInit() {
    $(document).ready(function () {
      var dataSource = new kendo.data.DataSource({
        transport: {
          read: {
            url: "https://demos.telerik.com/kendo-ui/service/products",
            dataType: "jsonp"
          }
        },
        pageSize: 10
      });
      $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true
      });
    });
  }

and on ngOnInit function i am getting error on ".kendoGrid({" line Error is : "ERROR TypeError: _assets_jquery_js__WEBPACK_IMPORTED_MODULE_7__(...).kendoGrid is not a function"

my angular.json file is :

"MyProject": {
      "root": "",
      "sourceRoot": "projects/src",
      "projectType": "application",
      "prefix": "projects/src",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/MyProject",
            "index": "projects/src/index.html",
            "main": "projects/src/main.ts",
            "polyfills": "projects/src/polyfills.ts",
            "tsConfig": "projects/src/tsconfig.app.json",
            "assets": [
              "projects/src/favicon.ico",
              "projects/src/assets"
            ],
            "styles": [
              "projects/src/styles.css",
              "node_modules/@progress/kendo-theme-default/dist/all.css",
              "assets/kendo/styles/kendo.common-bootstrap.min.css",
              "assets/kendo/styles/kendo.bootstrap.min.css",
              "assets/app-angular.css",
              "assets/main.css",
              "assets/index.css",
              "assets/angle/theme-f.css",
              "assets/fonts/fontawesome/css/font-awesome.min.css",
              "assets/fonts/simple-line-icons/css/simple-line-icons.css",
              "assets/fonts/katimavik/css/katimavik-font.css",
              "assets/angular/ngDialog/css/ngDialog.min.css",
              "assets/landing.css",
              "assets/adeco/adeco-katimavik.min.css"
            ],
            "scripts": [
              "projects/assets/kendo.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/src/environments/environment.ts",
                  "with": "projects/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Katimavik:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Katimavik:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Katimavik:build"
          }
        }
      }
    }

How can I configure my Angular 6 environment to be able to use Kendo UI grid for jQuery inside Angular 6?

Please let me know if you need more details.

Thank you.

P.S.

I need Kendo UI for jQuery in Angular 6 because I am trying to do migration from AngularJS to Angular 6. And inside angularJS I was used a lot of kendo grid for jQuery.

So if I am able to import and set up kendo.all.min.js in my project I don't need to rewrite each kendo grid for jQuery but just reuse existing kendo grid for jQuery.

1
angularkendo-uikendo-ui-angular2
Just wondering, is there a reason you're not using the Kendo Grid Angular 2+ component? – Shai
Kendo Supports angular too.. why do you want to use Jquery one ? – programoholic
I need Kendo UI for jQuery in Angular 6 because I am trying to do migration from AngularJS to Angular 6. And inside angularJS I was used a lot of kendo grid for jQuery. So if I am able to import and set up kendo.all.min.js in my project I don't need to rewrite each kendo grid for jQuery but just reuse existing kendo grid for jQuery. – Andrei
@Andrei using jQuery directly, in an angular project, is a very bad thing to do. Since Angular use its virtual DOM to do stuff, you should avoid the use of javascript or jQuery like this way. – Jacopo Sciampi
I know. But I have huge amount of kendo grid for jQuery inside my AngularJS project which I need to migrate to Angular 6. If I not able to set up 'kendo.all.min.js' in my project I will need to rewrite them all - this is huge work. – Andrei

1 Answers

0
votes

I had the same issue and it was resolved by kendo document. In this below you can see the snapshot.

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

It should be in angular.json and Import the jquery into your component as shown below:

declare var $: any;

and finally it's accessible by @ViewChild('grid', { static: false }) pivot;.

grid is an element in component.html that is defined in this way:

<div #grid></div>