Multiple selection is available in free version of pq grid / Use Select2 with it

[mraj]

Hi Iam using select option with attr multiple for multiple selection,

editor: {
                            type: 'select',
                            attr: 'multiple',
                            labelIndx: 'description',
                            valueIndx: 'lcid',
                            init: function (ui) {
                                //$(this).pqSelect({
                                //    checkbox: true,
                                //    width: '100%'
                                //});
                                // $(ui.editor).css('width', '200px');
                            },
.......




I am able to select multiple options and the values are coming,  but where as if I click outside the I am getting error .

I have also attached editorEnd event at the grid level, which is getting properly press enter and get out of the selection.

Where as if i click out side of the select list, i am getting error


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._mouseStart (pqgrid.min.js:10:21539)
    at $.<computed>.<computed>._mouseMove (jquery-ui.js:1879:12)
    at $.<computed>.<computed>._mouseMove (jquery-ui.js:137:25)




Is multiple select option attr: multiple is available in free, or need to use pqSelect ( is it free ? ),

or go for Select 2


Thanks in advance.

[mraj]

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

[paramvir]

Please use either setTimeout in editorEnd or cellSave event to refresh the grid.

[mraj]

Thanks for the suggestion. will try further.

[mraj]

Hi Is the pqSelect is available for free version. ?

[paramvir]

 yes, https://github.com/paramquery/select

[mraj]

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

[paramvir]

please share a jsfiddle

[mraj]

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 ).

[mraj]

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

[mraj]

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.

[mraj]

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.

[mraj]

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

             ....
}