Recent Posts31
Help for ParamQuery Grid (free version) / Re: Multiple selection is available in free version of pq grid / Use Select2 with it
« Last post by mraj 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
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