ParamQuery grid support forum
General Category => Help for ParamQuery Grid (free version) => Topic started by: mraj on August 09, 2024, 10:46:54 am
-
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.
-
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
-
Please use either setTimeout in editorEnd or cellSave event to refresh the grid.
-
Thanks for the suggestion. will try further.
-
Hi Is the pqSelect is available for free version. ?
-
yes, https://github.com/paramquery/select
-
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
-
please share a jsfiddle
-
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 ).
-
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
-
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.
-
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.
-
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;
}
}
....
}