Is there a sample using pqgrid.d.ts (TypeScript)?

[ohbayashi]

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

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

[paramvir]

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

[ohbayashi]

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.

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?

[paramvir]

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


[ohbayashi]

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.

[paramvir]

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.

[ohbayashi]

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