Messages

1

Help for ParamQuery Grid (free version) / Re: Steps needed for integrating pqGrid with Angular 14

« on: December 10, 2024, 09:25:17 am »

Is it possible / a way present to integrate the Material Design Kit (1/2/3) of the angular project to the pqgrid ?

2

Help for ParamQuery Grid (free version) / Steps needed for integrating pqGrid with Angular 14

« on: December 09, 2024, 07:05:22 pm »

Hi,

The existing sample in the website, is for angular 7 and pqgrid 3.5, when tried it to convert for the angular v14, getting error as

pq cannot find the namespace.
 
in  pqgrid.component.ts

import  { pq }    from 'pqgridf';

export class PqgridComponent implements OnInit {
  @Input() options!: object;
  grid: pq.gridT.instance ;


error TS2503: Cannot find namespace 'pq'.

18   grid: pq.gridT.instance;
           ~~

even i added the pqgridf.d.ts file

declare module 'pqgridf' {
  export const pq: any;
   
  }
added
in compiler options of tsconfig.json
 "typeRoots": [
      "node_modules/@types",
      "src/app"  // or wherever your pqgridf.d.ts is located
    ]


still i am unable to resolve the namespace,

please suggest, a way

thanks

3

Help for ParamQuery Grid (free version) / Re: Can we add bootstrap table to the paramquery grid

« on: October 21, 2024, 10:18:21 am »

was thinking of applying styles from bootstrap to the entire grid .

https://examples.bootstrap-table.com/

will also think as you mentioned.

Thanks for suggestion.

4

Help for ParamQuery Grid (free version) / Can we add bootstrap table to the paramquery grid

« on: October 17, 2024, 10:28:04 am »

Hi , Can we add bootstrap Table to the param query grid. ?

5

Help for ParamQuery Grid (free version) / scroll bars not working properly in the grid , in responsive design

« on: September 23, 2024, 10:05:18 am »

Hi,

In a grid with frozen column present at the middle of the page, when the chrome browser is resized to half and more than half of the,  page scrolling not works properly.

Unable to view the columns beyond the frozen column. scroll bar stucks.

Also grids cells itself not sits properly with the column header.

where as if moved through tab control, able to reach the last column of the grid.


The grid is inside a Bootstrap accordion.

6

Help for ParamQuery Grid (free version) / unable to copy header details, when tried to copy entire grid

« on: August 28, 2024, 06:29:02 pm »

Hi,

Is there any way to copy the entire grid with headers also. ( The headers are having grouping /grouped columns ). to the excel sheet

Thanks in Advance

7

Help for ParamQuery Grid (free version) / Re: Multiple selection is available in free version of pq grid / Use Select2 with it

« on: August 27, 2024, 05:35:50 pm »

 function fn_Major_cellSave(event, ui) {

                if (ui.dataIndx === 'caseid') {
                    if (ui.rowData?.caseid !== null && ui.rowData?.caseid !== "" ) {
                        fn_major_caseid_selection(ui);
                       // this.refreshRow({ rowIndx: ui.rowIndx });
                       this.refreshDataAndView; added  this, and it is working fine.
                      return;
                    }
                }

             ....
}

8

Help for ParamQuery Grid (free version) / Re: Multiple selection is available in free version of pq grid / Use Select2 with it

« on: August 26, 2024, 07:23:00 pm »

for the already filled rows
I am able to see all the columns listed in variable  mMajor[0/1/2 row ].  i am getting all the fields. but for the newly inserted only the values specified fields are listing.

please point out where i am missing.

9

Help for ParamQuery Grid (free version) / Re: Multiple selection is available in free version of pq grid / Use Select2 with it

« on: August 26, 2024, 04:52:04 pm »

Hi This is the function I have writtten in cellSave ( modified from EditorEnd )         

editor: {
                            type: 'select',
                            attr: 'multiple',
                            labelIndx: 'description',
                            valueIndx: 'lcid',
                            init: function (ui) {
                                if (ui.dataIndx === 'noofwiresahead' || ui.dataIndx === 'noofwiresback') {
                                    refresh_noof_wires(ui.rowData.conductortype_left);
                                }
                            },
                            getData: function (ui) {
                                return ui.$cell.find("select").val();
                            },
                        },

    .....


 function fn_Major_cellSave(event, ui) {

                if (ui.dataIndx === 'caseid') {
                    if (ui.rowData?.caseid !== null && ui.rowData?.caseid !== "" ) {
                        fn_major_caseid_selection(ui);
                       // this.refreshRow({ rowIndx: ui.rowIndx });
                        return;
                    }
                }

             ....
}


    function fn_major_caseid_selection(ui) {

                var optionvalues = ui.rowData.caseid;
                var optionvaluesarr = optionvalues.split(",");
               
                ui.rowData.caseid = optionvaluesarr[0] ?? null;
               
                var mWire=$("#grid_wire_details").pqGrid("option", "dataModel.data");
                var mMajor = $("#grid_MajorLoading_details").pqGrid("option", "dataModel.data");

                for (i = 0; i <= optionvaluesarr.length - 1; i++) {
                    for (j = 1; j < mWire.length; j++) {
                        if (i == 0 && j == 1) { //If Multiple Selections done, then 1
                            ui.rowData.conductortype_left = mWire[j].ahead_name;
                            ui.rowData.conductor_left_right_details = 'Identical';
                            continue;
                        } else {
                            mMajor.push({});
                            mMajor[mMajor.length - 1].casid = optionvaluesarr;
                            mMajor[mMajor.length-1].conductortype_left = mWire[j].ahead_name;
                            mMajor[mMajor.length-1].conductor_left_right_details = 'Identical';                         
                            //$("#grid_MajorLoading_details").pqGrid("addRow",
                            //    {
                            //        newRow: {},
                            //        refresh: true
                            //    }
                            //);
                        }
                    }
                }

                //$("#grid_MajorLoading_details").pqGrid("option", "refresh")
                $("#grid_MajorLoading_details").pqGrid("option", "dataModel.data", mMajor);
                $("#grid_MajorLoading_details").pqGrid("option", "refreshDataAndView");
                reserial_majorloding_grid();
                fn_Major_set_default_values();
                $("#grid_MajorLoading_details").pqGrid("option", "refresh")
               
                //$("#grid_MajorLoading_details").pqGrid("option", "refreshDataAndView");


            }

Not adding rows and reserial and default values

But if i do operation another time / any other operation. then the inserted rows gets reflected.

Suggest a event for proper updation.

10

Help for ParamQuery Grid (free version) / Re: Multiple selection is available in free version of pq grid / Use Select2 with it

« on: August 24, 2024, 10:50:23 am »

init: function (ui) {
                                        let selOptions = ui.cellData.split(',').map(Number);
                                        var $select = ui.$cell.find("select");
                                        console.log(ui.$cell);
                                        $select.pqSelect({
                                            checkbox: true,
                                            multiplePlaceholder: 'Select Insulator',
                                            width: '100%',
                                           
                                        });
                                        //let selOptions = [1, 2];
                                        $select.val(selOptions);
                                        $select.pqSelect('refreshData');//
                                       
                                    }

able to set the cell values to the select list options as selected.

Thanks for your support

11

Help for ParamQuery Grid (free version) / Re: Multiple selection is available in free version of pq grid / Use Select2 with it

« on: August 23, 2024, 02:53:58 pm »

Hi,

thanks for the reply. the error gone( my faulty code )

but how to set the select list check boxes with the value present in the cell data. for a multiple values ( if the cell has value like '1,2'  , then 1 and 2 option should be selected ).

12

Help for ParamQuery Grid (free version) / Re: Multiple selection is available in free version of pq grid / Use Select2 with it

« on: August 23, 2024, 09:35:10 am »

Hi,
 
I tried integrating , pqSelect with pqGrid for a column,

I am not getting the checkbox option.

If I use pqSelect in isolated aspx page(without integrating with pqgrid ), able to see the checkbox.( using the same code. )

( Only one difference used bootstrap.min.css when integrating with pqgrid, which is coming from pqgrid, if I use pqselect bootstrap, it conflicts )

Also I tried using  cellSave instead of EditorEnd, but getting error


pqgrid.min.js:10 Uncaught
TypeError: Cannot read properties of undefined (reading 'dataIndx')
    at d.saveCell (pqgrid.min.js:10:17101)
    at d._digestData (pqgrid.min.js:11:15900)
    at a.updateRow (pqgrid.min.js:14:23726)
    at d.saveEditCell (pqgrid.min.js:11:13778)
    at p._saveAndMove (pqgrid.min.js:12:5277)
    at p._keyDownInEdit (pqgrid.min.js:12:7641)
    at HTMLDivElement.<anonymous> (pqgrid.min.js:11:22116)
    at HTMLDivElement.dispatch (jquery.js:5233:27)
    at elemData.handle (jquery.js:5040:28)
d.saveCell   @   pqgrid.min.js:10
d._digestData   @   pqgrid.min.js:11
a.updateRow   @   pqgrid.min.js:14
d.saveEditCell   @   pqgrid.min.js:11
p._saveAndMove   @   pqgrid.min.js:12
p._keyDownInEdit   @   pqgrid.min.js:12
(anonymous)   @   pqgrid.min.js:11
dispatch   @   jquery.js:5233
elemData.handle   @   jquery.js:5040




Here is my code

title: "Type of Insulator Left", dataIndx: "typeofinsulaleft", dataType: "string", align: "right", halign: "center", width: 90, sortable: false,
                                editor: {
                                    type: 'select',
                                    init: function (ui) {
                                        var $select = ui.$cell.find("select");
                                        console.log(ui.$cell);
                                        $select.pqSelect({
                                            checkbox: true,
                                            multiplePlaceholder: 'Select Insulator',
                                            width: '100%',
                                        });
                                    },
                                    valueIndx: "id",
                                    labelIndx: "name",
                                    mapIndices: { "id": "typeofinsulaleft" },
                                    options: [{ id: 1, name: "1" }, { id: 2, name: "2" }, { id: 3, name: "3" }, { id: 4, name: "4" }],
                               
                                    //$select.val(options).pqSelect('refreshData');

                                    //$select.options = options;
                                    //Set the initial value if cell data is available
                                    //if (ui.cellData != null) {
                                    //    $select.pqSelect('val', ui.cellData);
                                    //}

                                    //        //var val = ui.cellData == null ? "" : ui.cellData;
                                    //        ////var mOptions = [{ id: 1, name: "Option 1" }, { id: 2, name: "Option 2" }];

                                    //        //ui.$cell.find("select").pqSelect({
                                    //        //    checkbox: true,
                                    //        //    multiplePlaceholder: 'Select Zone',
                                    //        //   // data: mOptions,
                                    //        //    width: '100%',
                                    //        //    labelIndx: "name",
                                    //        //    valueIndx: "id"
                                    //        //})//.on("change", function (evt) {
                                    //        ////    var val = $(this).val();
                                    //        ////    alert(val);
                                    //        ////}).pqSelect('open');
                               
                                },                               
                                        //also implement getData callback.
                                        getData: function (ui) {
                                            return ui.$cell.find("select").val();
                                        },
                               
                                editable: function (ui) {
                                    if (ui.rowData?.conductor_left_right_details === 'Referred') {
                                        return false;
                                    } else { return true; }
                                }
                                ,
                                validations: [
                                    /*{ type: 'regexp', value: '^(\d+(,\d+)*)?$', msg: 'Not in Proper format' },*/
                                    {
                                        type: function (ui) {

                                            var val = ui.value;
                                            let pt = /^(\d+(,\d+)*)?$/;
                                            if (!(pt.test(val))) {
                                                // alert('Not a valid value ');
                                                ui.msg = "Not a Valid Value : " + val;
                                                return false;
                                            }

                                        }
                                    }
                                ]


Edited ,  Checkbox is coming

type: 'select',
attr: "multiple='multiple'"

 , But after selecting unable to move outside the cell, getting error

13

Help for ParamQuery Grid (free version) / Re: Multiple selection is available in free version of pq grid / Use Select2 with it

« on: August 13, 2024, 10:23:14 am »

Hi Is the pqSelect is available for free version. ?

14

Help for ParamQuery Grid (free version) / Re: Multiple selection is available in free version of pq grid / Use Select2 with it

« on: August 12, 2024, 10:22:53 am »

Thanks for the suggestion. will try further.

15

Help for ParamQuery Grid (free version) / Re: Multiple selection is available in free version of pq grid / Use Select2 with it

« on: August 09, 2024, 05:55:25 pm »

Hi

Iam having multiple combo boxes for different columns

Iam getting error  when  i click outside the dropdown.( not using the current dropdown  )

jquery.js:8392 Uncaught TypeError: type.indexOf is not a function
    at Object.trigger (jquery.js:8392:13)
    at HTMLSelectElement.handler (jquery.js:5477:44)
    at HTMLSelectElement.dispatch (jquery.js:5233:27)
    at elemData.handle (jquery.js:5040:28)
    at Object.trigger (jquery.js:8461:12)
    at jQuery.fn.init.triggerHandler (jquery.js:8545:24)
    at d.blurEditor (pqgrid.min.js:11:11104)
    at d._editCell (pqgrid.min.js:11:20065)
    at d.editCell (pqgrid.min.js:11:18886)
    at d._onDblClickCell (pqgrid.min.js:10:23490)

 i commented all attributes regarding multiple select.


I am having fn_Major_editorEnd attached to editorEnd , there iam refreshing the grid.

In this function adding few more rows . If iam not refreshing the grid. Unable to see the new rows. If I refresh, this dropdown not works properly