Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.


Messages - [email protected]

Pages: [1]
1
ParamQuery Pro Evaluation Support / pqGrid browser rendering error
« on: January 23, 2019, 06:49:24 am »
I'm using the PQGrid Pro evaluation copy (ParamQuery Pro v 2.3.0).  I had
resolved my build issue posted earlier today to this forum.  But I'm getting
a browser rendering error.  The error is shown below along with my configuration.
Note that using pqgrid.min.js and pqgrid.dev.css since I had encountered another
runtime error.  The configuration below gets me to the location shown.

// browser error:

TypeError: t.ui is undefined    pqgrid.min.js:9:7781


// Configuration -
// 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);
  }

2
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);
  }

3
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

Pages: [1]