ParamQuery grid support forum
General Category => Bug Report => Topic started by: hyh888 on November 24, 2021, 05:03:21 am
-
In select editor of pqgrid demo, when TAB is pressed, the next cell will get focus. But in my code, TAB doesn't work. Would you like to tell me which css or js file will effect on it? I will add them.
For pqgrid confilicts with bootstrap 4.6.0(make a lot of trouble) ,I have to remove it from my project. But in the demo, I find bootstrap3 is imported. Is this the reason?
-
The following is html and js code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="assets/plugins/jquery/jquery.min.js"></script>
<link href="assets/plugins/paramquery811/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />
<link href="assets/plugins/paramquery811/jquery-ui-1.12.1/jquery-ui.structure.css" rel="stylesheet" />
<link href="assets/plugins/paramquery811/jquery-ui-1.12.1/jquery-ui.theme.css" rel="stylesheet" />
<link href="assets/plugins/paramquery811/pqgrid.min.css" rel="stylesheet" />
<link href="assets/plugins/paramquery811/pqgrid.ui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/plugins/paramquery811/themes/office/pqgrid.css" />
<script src="assets/plugins/paramquery811/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="assets/plugins/paramquery811/pqgrid.min.js"></script>
<link rel="stylesheet" href="assets/plugins/paramquery811/pqSelect/pqselect.min.css" />
<script src="assets/plugins/paramquery811/pqSelect/pqselect.min.js"></script>
<script src="assets/plugins/paramquery811/pqTouch/pqTouch.min.js"></script>
<script src="assets/plugins/paramquery811/localize/pq-localize-zh.js"></script>
<script src="assets/plugins/paramquery811/jsZip-2.5.0/jszip.min.js"></script>
<script src="assets/plugins/paramquery811/jsZip-utils-0.0.2/jszip-utils.min.js"></script>
<script src="assets/plugins/paramquery811/javascript-detect-element-resize/jquery.resize.js"></script>
<script src="assets/plugins/paramquery811/javascript-detect-element-resize/detect-element-resize.js"></script>
<script src="ne3.js"></script>
<title></title>
</head>
<body>
<div id="grid_editing"></div>
</body>
</html>
ne3.js
$(function () {
var btCls = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
var btDCls = "changes ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-icon-primary";
//optional function used to create pqSelect and auto open it.
function initSelect(ui) {
ui.$cell.find("select").pqSelect();
setTimeout(function () {
ui.$cell.find("select").pqSelect('open');
})
}
function saveChanges() {
var grid = this;
//attempt to save editing cell.
if (grid.saveEditCell() === false) {
return false;
}
if (grid.isDirty() && grid.isValidChange({ focusInvalid: true }).valid) {
var gridChanges = grid.getChanges({ format: 'byVal' });
gridChanges.save = gridChanges.addList;
delete gridChanges.addList;
gridChanges.update = gridChanges.updateList;
delete gridChanges.updateList;
gridChanges["delete"] = new Array();
for (var i = 0; i < gridChanges.deleteList.length; i++) {
gridChanges["delete"].push(gridChanges.deleteList["id"]);
};
delete gridChanges.deleteList;
//post changes to server
$.ajax({
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
grid.showLoading();
},
url: "/admin/post/submit", //for ASP.NET, java
data: {
jboltTable: JSON.stringify(gridChanges)
},
success: function (changes) {
grid.refreshDataAndView();
grid.history({ method: 'reset' });
},
complete: function () {
grid.hideLoading();
}
});
}
}
var colModel = [
{ title: "ID", width:20, dataIndx: "id", editable: false },
{ title: "Unit", dataIndx: "goodsUnit", width: 30,
editor: {
type: "select",
init: initSelect,
options: []
},
validations: [
{ type: 'minLen', value: 1, msg: "Required" }
]
},
{ title: "Name", width: 300,dataIndx: "name", editable: true },
{ title: "Price", dataIndx: "price", width: 50
// ,validations: [{ type: 'minLen', value: 1, msg: "Required"}]
},
{
title: "DEL", editable: false, minWidth: 123, sortable: false,
render: function (ui) {
return "<button type='button' class='delete_btn'>X</button>";
},
postRender: function (ui) {
var rowIndx = ui.rowIndx,
grid = this,
$cell = grid.getCell(ui);
$cell.find("button").button({ icons: { primary: 'ui-icon-scissors' } })
.bind("click", function () {
grid.addClass({ rowIndx: ui.rowIndx, cls: 'pq-row-delete' });
setTimeout(function () {
var ans = window.confirm("Are you sure to delete row" + (rowIndx + 1) + "?");
grid.removeClass({ rowIndx: rowIndx, cls: 'pq-row-delete' });
if (ans) {
grid.deleteRow({ rowIndx: rowIndx });
}
})
});
}
}
];
var dataModel = {
dataType: "JSON",
location: "remote",
method: "GET",
url: "/json/goods.json"
}
$("div#grid_editing").pqGrid({
colModel: colModel,
//width: 'flex',
create: function (evt, ui) {
var grid = this,
column;
//fetch options for ShipCountry column from server.
$.getJSON("/json/unit.json", function (response) {
column = grid.getColumn({ dataIndx: 'goodsUnit' });
column.editor.options = response;
});
},
dataModel: dataModel,
trackModel: { on: true },
editModel: {
saveKey: $.ui.keyCode.ENTER,
keyUpDown: false,
clicksToEdit: 1
},
beforeCellKeyDown: function (event, ui) {
// if(!this.isValid( { rowData: ui.rowData } ).valid)
// {return;}
if (event.key == "ArrowDown" && ui.rowIndx == this.getTotalRows() - 1) {
var rowData = {}; //empty row
var rowIndx = this.addRow({ rowData: rowData, checkEditable: true });
// this.goToPage({ rowIndx: rowIndx });
this.editFirstCellInRow({ rowIndx: rowIndx });
}
if (event.key == "Delete") {
debugger;
var nodes = [];
var Sel = this.Selection().eachRow(function (rowData) {
nodes.push(rowData);
})
this.deleteNodes(nodes);
return false; //to prevent default behaviour.
}
},
toolbar: {
items: [
{
type: '<span><b>Post Management</b></span>',
},
{ type: 'separator' },
{
type: 'button', icon: 'ui-icon-plus', label: 'ADD', cls: btCls, listener: function () {
if (!this.isValid().valid) { return; }
var rowData = { enable: true }; //empty row
var rowIndx = this.addRow({ rowData: rowData, checkEditable: true });
this.goToPage({ rowIndx: rowIndx });
this.editFirstCellInRow({ rowIndx: rowIndx });
}
},
{ type: 'separator' },
{
type: 'button', icon: 'ui-icon-disk', label: 'Save', cls: btCls, listener: saveChanges,
options: { disabled: true }
},
{
type: 'button', icon: 'ui-icon-cancel', label: 'Reject', cls: btCls, listener: function () {
this.rollback();
this.history({ method: 'resetUndo' });
},
options: { disabled: true }
},
{ type: 'separator' },
{
type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', cls: btCls, listener: function () {
this.history({ method: 'undo' });
},
options: { disabled: true }
},
{
type: 'button', icon: 'ui-icon-arrowrefresh-1-s', cls: btCls, label: 'Redo', listener: function () {
this.history({ method: 'redo' });
},
options: { disabled: true }
}
]
},
scrollModel: {
//autoFit: true
},
history: function (evt, ui) {
var $tb = this.toolbar();
if (ui.canUndo != null) {
$("button.changes", $tb).button("option", { disabled: !ui.canUndo });
}
if (ui.canRedo != null) {
$("button:contains('Redo')", $tb).button("option", "disabled", !ui.canRedo);
}
$("button:contains('Undo')", $tb).button("option", { label: 'Undo (' + ui.num_undo + ')' });
$("button:contains('Redo')", $tb).button("option", { label: 'Redo (' + ui.num_redo + ')' });
},
filterModel: { on: true, mode: "AND", header: true },
swipeModel: { on: false },
historyModel: { checkEditable: false },
numberCell: { show: true },
resizable: true,
//scrollModel: { autoFit: false },
showBottom: false,
title: "Shipping Orders <b>(Custom editing)</b>"
});
});
Json:
{
"data": [
{
"age": 59,
"amount": 19.00,
"briefInfo": "GMRY",
"createTime": "2021-10-14 15:59:19",
"demoDate": "2021-10-15 00:00:00",
"demoTime": "15:59:11",
"enable": false,
"goodsUnit": "box",
"id": 1,
"isSystemAdmin": false,
"name": "fresh milk",
"price": 22.00,
"sortRank": 1,
"total": 2.00,
"updateTime": "2021-10-21 08:48:57"
},
{
"age": 25,
"amount": 33.00,
"briefInfo": "GMRY",
"createTime": "2021-10-14 16:04:00",
"demoDate": "2021-10-16 00:00:00",
"demoDateTime": "2021-10-15 00:00:00",
"enable": false,
"goodsUnit": "box",
"id": 2,
"isSystemAdmin": false,
"name": "Yogurt",
"price": 22.00,
"total": 6.00,
"updateTime": "2021-10-21 08:48:57"
},
{
"age": 44,
"amount": 99.00,
"briefInfo": "hyh",
"createTime": "2021-10-14 16:04:00",
"demoDate": "2021-10-20 00:00:00",
"demoDateTime": "2021-10-29 00:00:00",
"demoMonth": "2021-10",
"enable": false,
"goodsUnit": "box",
"id": 3,
"isSystemAdmin": false,
"name": "UHT",
"price": 11.00,
"total": 3.00,
"updateTime": "2021-10-21 08:48:57"
},
{
"age": 33,
"amount": 77.00,
"createTime": "2021-10-18 19:14:30",
"demoDate": "2021-10-13 00:00:00",
"demoMonth": "2021-11",
"enable": false,
"goodsUnit": "box",
"id": 4,
"isSystemAdmin": false,
"name": "drinking yougurt",
"price": 66.00,
"total": 7.00,
"updateTime": "2021-10-21 08:47:01"
}
],
"state": "ok"
}
-
I assume you mean pqSelect editor in pqgrid.
It's been already noted that tab key ( or save key ) is not working properly with pqSelect editor in pqgrid.
I can see this issue in the demo: https://paramquery.com/pro/demos/editing_custom
Its fix would be released in upcoming version.
It has nothing to do with bootstrap.
-
In your demo, the TAB action is OK. but in my code, there is a problem? Is there a quick solution?
-
You can download my project here:
https://pan.baidu.com/s/1I_1pMaDfS384-JoCqrPMzw
password:o5ol
In the demo https://paramquery.com/pro/demos/editing_custom, I do found column "Shipping Via" has the same problem, but in "Ship Country" and "Books" columns, there is no problem. My question is almost the same as "Shipping Via" column.
-
Shipping via column uses pqSelect editor, hence the issue.
ShipCountry and Books columns use autocomplete editor and they work fine.
you may also use autocomplete editor to get rid of the issue.
-
Thank you very much.
-
I have negociate with our customer, the autocomplete editor could not meet their need. It will be better if pqselect can work as soon as possible.
-
This has been fixed in v8.2.0