jqx is not defined

[husarzParticipant]

Hello,

I am trying to use jqxgrid (jQWidgets 5.3.2.) in Angular 4, asp.net core 2.0 application (node v6.11.3, npm v3.10.10). When I am trying to access Externalgrids component where I have the jqxgrid implemented I am getting the ‘Error: Uncaught (in promise): ReferenceError: jqx is not defined’.

Please give some help regarding the problem or some advice what to check, because I would really like to use jQWidgets.

The full code of application is on github.

Below are parts of relevant code:
\ClientApp\app\app.module.shared.ts

import { jqxGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxgrid';

@NgModule({
    
    declarations: [
...
   jqxGridComponent
   ],

\ClientApp\app\components\externalgrids\externalgrids.component.ts

import { jqxGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxgrid';
 @Component({
  selector: 'app-root',
  templateUrl: './externalgrids.component.html',
 })

export class ExternalGridsComponent {

  source: any =
  {
      localdata: [
          ...
      ],
      datafields: [
         ...
      ],
      datatype: 'array'
  };
  dataAdapter: any = new jqx.dataAdapter(this.source);
  columns: any[] =
  [
     ....
  ];

}

\ClientApp\app\components\externalgrids\externalgrids.component.html

    <!-- Styles -->
    <link rel="stylesheet" href="http://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <!-- jQWidgets -->
    <script src="http://www.jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    <script src="http://www.jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
    <script src="http://www.jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
    <script src="http://www.jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
    <script src="http://www.jqwidgets.com/public/jqwidgets/jqxmenu.js"></script>
    <script src="http://www.jqwidgets.com/public/jqwidgets/jqxgrid.js"></script>
    <script src="http://www.jqwidgets.com/public/jqwidgets/jqxgrid.selection.js"></script>
    <script src="http://www.jqwidgets.com/public/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script src="http://www.jqwidgets.com/public/jqwidgets/jqxgrid.sort.js"></script>
.
.
.

<app-root>
             <jqxGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" 
            [columnsresize]="true" [sortable]="true">
            </jqxGrid>     
 </app-root>

\package.json
"jqwidgets-framework": "https://registry.npmjs.org/jqwidgets-framework/-/jqwidgets-framework-5.3.2.tgz",

[Peter StoevKeymaster]

Hi husarz,

File references cannot be part of the template code. Please, take a look at our documentation and getting started topics especially. We add them in the index file.

Regards,
Peter

[adrenalinedjParticipant]

In my case, I use angular-cli and this is what I have in “.angular-cli.json”

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css",
        "../node_modules/jqwidgets-framework/jqwidgets/styles/jqx.bootstrap.css",
        "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jqwidgets-framework/jqwidgets/jqx-all.js"
      ],

[Ivo ZhulevParticipant]

Hi adrenalinedj,

Can you please make a simple example of this and share it?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts