46
Help for ParamQuery Pro / Re: cell get focus event
« on: December 03, 2021, 10:12:53 am »
Thank you, it works
ParamQuery Grid
Show Posts
This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.
47
Help for ParamQuery Pro / Re: cell get focus event
« on: December 02, 2021, 07:32:48 pm »
Thank you very much, I can get the value of selected cell. But is there any method to get the id of the row that includes the selected cell? I tried to use ui.rowData["id"] to get the row id, but there is no such method.
48
Help for ParamQuery Pro / cell get focus event
« on: December 01, 2021, 05:35:13 pm »
Would you like kindly show me how to get cell value when a cell get focus whenever using keyboard or mouse?
49
Help for ParamQuery Pro / Re: How hide maximize button
« on: December 01, 2021, 08:23:16 am »
Thank you very much.
50
Help for ParamQuery Pro / Re: How hide maximize button
« on: November 29, 2021, 08:01:39 am »
Would you kindly set collapsible: {on: false, toggle: false} in the grid options as default? Usually, in business there is no need to set them true.
51
Bug Report / Re: TAB doesn't work in select editor
« on: November 26, 2021, 10:47:47 am »
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.
52
Bug Report / Re: TAB doesn't work in select editor
« on: November 24, 2021, 06:28:59 pm »
Thank you very much.
53
Bug Report / Re: TAB doesn't work in select editor
« on: November 24, 2021, 11:31:08 am »
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.
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.
54
Bug Report / Re: TAB doesn't work in select editor
« on: November 24, 2021, 11:21:08 am »
In your demo, the TAB action is OK. but in my code, there is a problem? Is there a quick solution?
55
Bug Report / Re: TAB doesn't work in select editor
« on: November 24, 2021, 11:11:04 am »
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"
}
<!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"
}
56
Bug Report / TAB doesn't work in select editor
« 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?
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?
57
Bug Report / Re: Copy and paste problem
« on: November 22, 2021, 06:21:33 pm »
Would you like to browse the picture as order from batchedit0.png to batchedit3.png？ It seems that the forum uploaded the file to server reversedly.
58
Bug Report / Re: Copy and paste problem
« on: November 22, 2021, 02:35:35 pm »
Add more screenshot
59
Bug Report / Copy and paste problem
« on: November 22, 2021, 02:20:41 pm »
When I add a new row in grid and let editor open, then copy data of another row(Ctrl+C) to the new-added row((Ctrl+V), the cells with delete buttons all lost there style(css and the scissors disappeared). If you click the delete button in the cell, the delete function could not work. But when rows overflow the grid, the problem will not come out, you'd better set the height of grid is 600 and place less than 8 records in the grid to keep enough place in the grid for the new row.
The screen-shot are as follow:
The screen-shot are as follow:
60
Help for ParamQuery Pro / Re: DELETE problem
« on: November 20, 2021, 01:23:13 pm »
Thank you, it works.