Integrate jQuery control in angular 8

Question

We are trying to integrate a jQuery version of a control in an Angular 8 application. I tried initializing the component in ngAfterViewInit() but I'm getting an error.

ngAfterViewInit() {
  jq("#PivotGrid").ejPivotGrid({
    dataSource: {
      data: this.data,
      rows: [{
        name: 'departmentName',
        caption: 'Department',
        showSubTotals: false
      }, {
        name: 'className',
        caption: 'Class',
        showSubTotals: false
      }, {
        name: 'metricName',
        caption: 'Metric'
      }],
      columns: [{
        name: 'year',
        caption: 'Year'
      }, {
        name: 'quarterDescription',
        caption: 'Quarter'
      }, {
        name: 'monthDescription',
        caption: 'Month'
      }, {
        name: 'weekDescription',
        caption: 'Week'
      }, {
        name: 'channel',
        caption: 'Channel'
      }, ],
      values: [{
        name: 'metricValue',
        caption: 'Metric Value'
      }, ]
    }
  });
}

Error is

TypeError: jquery__WEBPACK_IMPORTED_MODULE_2__(...).ejPivotGrid is not a function

Script section in angular.json

     "scripts": [
          "./node_modules/jquery/dist/jquery.min.js",
          "src/assets/scripts/ej.js"
        ]

And the error is...? Also, remove the trailing commas in your arrays. They will cause issues in IE — Rory McCrossan, Mar 13 '20 at 10:06
Hi @RoryMcCrossan error i am getting is TypeError: jquery__WEBPACK_IMPORTED_MODULE_2__(...).ejPivotGrid is not a function but i included the library, tried including in index.html as cdn and also tried downloading script and included in angular.json . Both didn't work. — Dileep Gagan R, Mar 13 '20 at 10:16
Have you declared `ejPivotrGrid` in a typings file? Something like this - `interface JQuery{ejPivotGrid(options: any): JQuery;}` — Sam, Mar 13 '20 at 10:40
Hi @Sam can u please elaborate. Is it something like i have to create *.d.ts file and declare a interface in it? — Dileep Gagan R, Mar 13 '20 at 10:45
Hey, yeah that's correct otherwise typescript won't know what ejPivotGrid() is and its relationship to jQuery. There is a good example of it here - https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular — Sam, Mar 13 '20 at 10:47
@DileepGaganR: If you are looking for the typings use the command `npm install @types/ej.web.all --save-dev` to install the required type definitions. — Karthick, Mar 13 '20 at 11:50
@DileepGaganR: Also, you can use the `jquery` typings by running the command `npm install @types/jquery --save-dev` — Karthick, Mar 13 '20 at 11:55
Hi @Karthick I tried mentioned steps still getting same error. any help is much appreciated. — Dileep Gagan R, Mar 13 '20 at 13:01
Hi @Sam I tried mentioned steps still getting same error. any help is much appreciated — Dileep Gagan R, Mar 13 '20 at 13:01
Where is ejPivotTable from? How have you added it to your project? — Sam, Mar 13 '20 at 13:45
@Sam I tried in both the ways downloading the entire script and also using cdn. No luck in both cases — Dileep Gagan R, Mar 16 '20 at 07:11
@DileepGaganR: Can you please share your simple sample in github.? It would help to get the insight and help you out. — Karthick, Mar 19 '20 at 05:00

score 0 · Answer 1 · answered Mar 19 '20 at 12:51

Based on your requirement, we have prepared a sample in Angular 8 for your reference. Kindly check the below sample and documentation link.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample1592888818

Documentation Link: https://help.syncfusion.com/angular/pivotgrid/getting-started#relational

We hope the above sample meets your requirement. If still the problem exists, kindly reproduce the issue in the provided sample and revert us. This would be helpful for us to proceed further.

Integrate jQuery control in angular 8

1 Answers1