ParamQuery grid support forum

General Category => ParamQuery Pro Evaluation Support => Topic started by: john.wright@tideworks.com on January 23, 2019, 12:22:36 am

Title: pqGrid method not working following ParamQuery Pro Tutorial, using Angular 7
Post by: john.wright@tideworks.com on January 23, 2019, 12:22:36 am

I'm following the ParamQuery Pro Tutorial closely.  The
pqGrid method is not working. I'm using Angular 7.  I
might have missed something.  Could I get some
assistance.  Thanks.

Problem line:
    -> In my component .ts file:

    import * as $ from 'jquery';
    import 'pqgrid.dev.js';

    let $grid = $('#grid_array').pqGrid( obj );  //<= Problem line

    -> .pqGrid is not working, not found
    -> Build error: 'pqGrid' does not exist on type 'JQuery<HTMLElement>'


   -> in my index.html file:

  <!--ParamQuery Grid css files-->
  <link rel="stylesheet" href="./pqgrid.dev.css" />

  <!--add pqgrid.ui.css for jQueryUI theme support-->
  <link rel="stylesheet" href="./pqgrid.ui.min.css" />-->

  <!--ParamQuery Grid js files-->
  <script type="text/javascript" src="./pqgrid.dev.js" ></script>


   -> I have added .d.ts files for JQuery, JQueryUI, PQGrid per PQGrid Pro instructions


-John W - Seattle

Title: Re: pqGrid method not working following ParamQuery Pro Tutorial, using Angular 7
Post by: paramvir on January 23, 2019, 06:25:50 am

John

Have you added reference to pqGrid type definition file at the top of your .ts file.

Code: [Select]

/// <reference path="../substitute path/pqgrid.d.ts" />


Title: Re: pqGrid method not working following ParamQuery Pro Tutorial, using Angular 7
Post by: john.wright@tideworks.com on January 23, 2019, 06:35:27 am

I resolved this problem with the following:

// angular.json:

...
            "styles": [
              "src/styles.css",
              "node_modules/jquery-ui-themes/jquery-ui.css",
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "./pqgrid.dev.css",
              "./pqgrid.ui.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/jquery-ui/ui/jquery-1-7.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "./pqgrid.min.js"
            ]
         
// tsconfig.json

    "types": [
      "jquery",
      "jqueryui",
      "pqgrid"
    ]

// my home.component.ts:

import 'jquery';
import 'jquery-ui';
import * as $ from '../../../pqgrid.min.js';

ngOnInit() {

 ...

    const pq = $.paramquery;
    pq.pqgrid('#grid_array', obj);
  }