ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: ohbayashi on February 09, 2018, 07:15:23 pm

Title: Is there a sample using pqgrid.d.ts (TypeScript)?
Post by: ohbayashi on February 09, 2018, 07:15:23 pm

I am glad that there is something that replaced the following demo.

https://paramquery.com/pro/demos/editing

Title: Re: Is there a sample using pqgrid.d.ts (TypeScript)?
Post by: paramvir on February 12, 2018, 12:35:34 pm

There is no sample of using type definition file of pqgrid currently, but it would be available soon. Thanks for your feedback.

Title: Re: Is there a sample using pqgrid.d.ts (TypeScript)?
Post by: ohbayashi on February 15, 2018, 03:53:00 pm

It is converted to TypeScript by referring to the following.
https://paramquery.com/demos/editing

Code: [Select]

             // make rows editable selectively.
             editable: function (ui) {
                 var $ grid = $ (this);
                 var rowIndx = ui.rowIndx;
                 if ($ grid.pqGrid ("hasClass", {rowIndx: rowIndx, cls: 'pq-row-edit'}) == true) {
                     return true;
                 }
                 else {
                     return false;
                 }
             },
The following error will occur on line 237.

Quote

Property 'pqGrid' does not exist in type 'JQuery <HTMLElement>'.

I think that is why it is not possible to import pqgrid.d.ts,
It is an error to try importing, and I do not know the precise description method.

What should I do?

Title: Re: Is there a sample using pqgrid.d.ts (TypeScript)?
Post by: paramvir on February 15, 2018, 04:32:10 pm

https://paramquery.com/demos/editing is a free version example, it's incompatible with Pro version.

Please use same version of code example for pqgrid.d.ts

https://paramquery.com/pro/demos/editing

grid can be cast to pq.gridT.instance in order to take intellisense and type checking help of typescript.

Example:

Code: [Select]

var grid:pq.gridT.instance = pq.grid("#grid_editing", obj);


Code: [Select]

        //to check whether any row is currently being edited.
        function isEditing(grid:pq.gridT.instance) {
            var rows = grid.getRowsByClass( { cls: 'pq-row-edit' });
            if (rows.length > 0) {
                var rowIndx = rows[0].rowIndx;
                grid.goToPage({ rowIndx: rowIndx });
                //focus on editor if any
                grid.editFirstCellInRow({ rowIndx: rowIndx });
                return true;
            }
            return false;
        }


Title: Re: Is there a sample using pqgrid.d.ts (TypeScript)?
Post by: ohbayashi on February 16, 2018, 12:02:01 pm

I'm sorry. It is a more rudimentary question.
How can I make it intellisense?

I tried the following methods, but neither error nor recognition

editing.ts

Code: [Select]

import * as pq from '../../../../public/paramquery/5.1.0/pqgrid'

or

tsconfig.json

Code: [Select]

{
     {
         "types": [
             "jquery",
             "jqueryui",
             "public/paramquery/5.1.0"
         ]
     }
}

or

node_modules/@types/pqgrid <- folder create
   pqgrid.d.ts <- copy


The tool uses Visual Studio Code.

Title: Re: Is there a sample using pqgrid.d.ts (TypeScript)?
Post by: paramvir on February 16, 2018, 12:27:30 pm

These the steps that work for me in VS code to get intellisense and type checking support.

1. Name your typescript file editing.ts

2. In tsconfig.json, add editing.ts in files so that it gets transpiled to editing.js

Code: [Select]

"files": [
        "js/editing.ts"
]

3. Add jQuery.d.ts, jqueryui.d.ts and pqgrid.d.ts in the typings folder of your project.

In jqueryui.d.ts, add this at the top.

Code: [Select]

/// <reference path="jquery.d.ts" />


In pqgrid.d.ts, add this at the top.

Code: [Select]

/// <reference path="jquery.d.ts" />
/// <reference path="jqueryui.d.ts" />

4. In editing.ts, add this at the top.

Code: [Select]

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


Note: The paths are relative and may vary in your env.

Title: Re: Is there a sample using pqgrid.d.ts (TypeScript)?
Post by: ohbayashi on February 16, 2018, 04:13:54 pm

Thank you!
I was able to check up to the place where compilation passed and Grid was displayed !!