1
Help for ParamQuery Pro / Re: Silent Sort
« on: November 23, 2016, 11:27:46 am »
thanks heaps for your quick reply - did not think of the native sort ...
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.
Pages: [1]
2
Help for ParamQuery Pro / Silent Sort
« on: November 23, 2016, 04:31:50 am »
Hello there,
We have grid which should NOT be sort-able by the users (i.e. sortModel.on=false), but I have to sort the grid in a certain way after each insert etc.
Things work just fine by using the sort method - the only challenge I have is that I do NOT want to have the visual sort indicator in the column heading being displayed. I can obviously use CSS to 'display:none' the triangle, but this still leaves the column heading in a active state ... and honestly it is bit messy.
What you recommend.
Thanks heaps in advance
S
PS: We are still on 3.2
We have grid which should NOT be sort-able by the users (i.e. sortModel.on=false), but I have to sort the grid in a certain way after each insert etc.
Things work just fine by using the sort method - the only challenge I have is that I do NOT want to have the visual sort indicator in the column heading being displayed. I can obviously use CSS to 'display:none' the triangle, but this still leaves the column heading in a active state ... and honestly it is bit messy.
What you recommend.
Thanks heaps in advance
S
PS: We are still on 3.2
3
Bug Report / Re: Disappearing headers
« on: February 25, 2016, 12:13:30 am »
Thanks heaps for your (as always) quick reply including a cleaner fix. I should also mention that the grid is a real beauty - awesome functionality and easy to use! I have been using it now for the best part of a year and never had we the impression that it is not up to the job. It deals with large tables (100k+) browser side like a charm!. Well done!
Looking forward to 3.3 already.
Best regards
S
Looking forward to 3.3 already.
Best regards
S
4
Bug Report / Disappearing headers
« on: February 24, 2016, 06:26:24 am »
Hi there,
We hit an issue in a multi row header setup when dynamically hiding/showing a column which is inside a multi row header definition. The top header disappears when hiding the column.
The issue can be easily reproduced by using the demo app sample: 'Pro->Columns->Show/Hide' an replace the original column definition (line 2 ff) with the following:
Then hide the column 'Order Date' and watch the top header 'Header 2' disappear (it should not) .
The following patch to 3.2.0 fixed our issue (only commented out the 'offending' lines )
Could you please verify and/or fix more adequately.
Best regards and thanks in advance
S
We hit an issue in a multi row header setup when dynamically hiding/showing a column which is inside a multi row header definition. The top header disappears when hiding the column.
The issue can be easily reproduced by using the demo app sample: 'Pro->Columns->Show/Hide' an replace the original column definition (line 2 ff) with the following:
Code: [Select]
var columns = [
{ title: "Order ID", width: 100, dataIndx: "OrderID", hidden: true },
{title :"Header", colModel: [
{ title: "Customer Name", width: 130, dataIndx: "CustomerName" },
{ title: "Product Name", width: 190, dataIndx: "ProductName" },
{ title: "Unit Price", width: 100, dataIndx: "UnitPrice", align: "right" }]},
{ title: "Quantity", width: 100, dataIndx: "Quantity", align: "right" },
{title :"Header2", colModel: [{ title: "Order Date", width: 100, dataIndx: "OrderDate" },
{ title: "Required Date", width: 100, dataIndx: "RequiredDate", hidden: true },
{ title: "Shipped Date", width: 100, dataIndx: "ShippedDate", hidden: true },
{ title: "ShipCountry", width: 100, dataIndx: "ShipCountry", hidden: true },
{ title: "Freight", width: 100, align: "right", dataIndx: "Freight" },
{ title: "Shipping Name", width: 120, dataIndx: "ShipName" },
{ title: "Shipping Address", width: 180, dataIndx: "ShipAddress", hidden: true },
{ title: "Shipping City", width: 100, dataIndx: "ShipCity" },
{ title: "Shipping Region", width: 110, dataIndx: "ShipRegion", hidden: true },
{ title: "Shipping Postal Code", width: 160, dataIndx: "ShipPostalCode", hidden: true }]}
];
Then hide the column 'Order Date' and watch the top header 'Header 2' disappear (it should not) .
The following patch to 3.2.0 fixed our issue (only commented out the 'offending' lines )
Code: [Select]
Index: pages/scripts/grid/pqgrid.dev.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- pages/scripts/grid/pqgrid.dev.js (date 1455487520000)
+++ pages/scripts/grid/pqgrid.dev.js (date 1455577923000)
@@ -8297,15 +8297,15 @@
return
} else {
if (col > 0 && column == headerCells[row][col - 1]) {
- if (col > initH) {
- return
- } else {
+ //if (col > initH) {
+ // return
+ //} else {
var orig_colIndx = getColIndx(headerCells, row, column);
if (orig_colIndx < freezeCols) {
return
}
colSpan = colSpan - calcVisibleColumns(CM, orig_colIndx, col)
- }
+// }
} else {
if (freezeCols && (col < freezeCols) && (col + colSpan > freezeCols)) {
var colSpan1 = colSpan - calcVisibleColumns(CM, freezeCols, initH),
\ No newline at end of file
Could you please verify and/or fix more adequately.
Best regards and thanks in advance
S
5
Bug Report / Re: Filter, add row, then save, remove filter - nbr of rows double
« on: August 25, 2015, 12:49:16 am »
Hello there,
Thanks for your reply - I had a look through the example you quoted - unfortunately it does not suit our requirements from a layout perspective. We need the filter item in the top row - I did use the example given in your no-pro version to create the sample code I sent in my previous post.
Which brings me to the issue of incompleteness. I do agree - after having copied and pasted the the code from my previous post back into the sample things did not work. :-( The culprit was the forum editor - considering some of the elements in my code as markup. Sorry I should have realised this before - and used the code tag.
Attached again the sample code, now working, - I tested the 'preview'-ed version which will show up the issue when following the step as outlined in my previous post.
Thanks and sorry once again for the hassle
Thanks for your reply - I had a look through the example you quoted - unfortunately it does not suit our requirements from a layout perspective. We need the filter item in the top row - I did use the example given in your no-pro version to create the sample code I sent in my previous post.
Which brings me to the issue of incompleteness. I do agree - after having copied and pasted the the code from my previous post back into the sample things did not work. :-( The culprit was the forum editor - considering some of the elements in my code as markup. Sorry I should have realised this before - and used the code tag.
Attached again the sample code, now working, - I tested the 'preview'-ed version which will show up the issue when following the step as outlined in my previous post.
Thanks and sorry once again for the hassle
Code: [Select]
$(function () {
function filterhandler(evt, ui) {
//debugger;
var $grid = $("#grid_editing");
var $toolbar = $grid.find('.pq-toolbar'),
$value = $toolbar.find(".filterValue"),
value = $value.val(),
condition = $toolbar.find(".filterCondition").val(),
dataIndx = $toolbar.find(".filterColumn").val(),
filterObject;
if (dataIndx == "") {//search through all fields when no field selected.
filterObject = [];
var CM = $grid.pqGrid("getColModel");
for (var i = 0, len = CM.length; i < len; i++) {
var dataIndx = CM[i].dataIndx;
filterObject.push({ dataIndx: dataIndx, condition: condition, value: value });
}
}
else {//search through selected field.
filterObject = [{ dataIndx: dataIndx, condition: condition, value: value}];
}
$grid.pqGrid("filter", {
oper: 'replace',
data: filterObject
});
}
//called when save changes button is clicked.
function saveChanges() {
var grid = $grid.pqGrid('getInstance').grid;
//debugger;
//attempt to save editing cell.
if (grid.saveEditCell() === false) {
return false;
}
var isDirty = grid.isDirty();
if (isDirty) {
//validate the new added rows.
var addList = grid.getChanges().addList;
//debugger;
for (var i = 0; i < addList.length; i++) {
var rowData = addList[i];
var isValid = grid.isValid({ "rowData": rowData }).valid;
if (!isValid) {
return;
}
}
var changes = grid.getChanges({ format: "byVal" });
//post changes to server
$.ajax({
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
grid.showLoading();
},
url: "/pro/products/batch", //for ASP.NET, java
data: { list: JSON.stringify(changes) },
success: function (changes) {
//debugger;
grid.commit();
grid.refreshDataAndView();
grid.history({ method: 'reset' });
},
complete: function () {
grid.hideLoading();
}
});
}
}
var obj = {
hwrap: false,
resizable: true,
rowBorders: false,
virtualX: true,
numberCell: { show: true },
filterModel: { mode: 'OR', type: "local" },
trackModel: {on: true}, //to turn on the track changes.
toolbar: {
items: [
{ type: 'button', icon: 'ui-icon-plus', label: 'New Product', listener:
{ "click": function (evt, ui) {
//append empty row at the end.
var rowData = { UnitPrice: 1, ProductID: 34, UnitPrice: 0.2 }; //empty row
var rowIndx = $grid.pqGrid("addRow", { rowData: rowData, checkEditable: true });
$grid.pqGrid("goToPage", { rowIndx: rowIndx });
$grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
}
}
},
{ type: 'separator' },
{ type: 'button', icon: 'ui-icon-disk', label: 'Save Changes', cls: 'changes', listener:
{ "click": function (evt, ui) {
saveChanges();
}
},
options: { disabled: true }
},
{ type: 'button', icon: 'ui-icon-cancel', label: 'Reject Changes', cls: 'changes', listener:
{ "click": function (evt, ui) {
$grid.pqGrid("rollback");
$grid.pqGrid("history", { method: 'resetUndo' });
}
},
options: { disabled: true }
},
{ type: 'button', icon: 'ui-icon-cart', label: 'Get Changes', cls: 'changes', listener:
{ "click": function (evt, ui) {
var changes = $grid.pqGrid("getChanges", { format: 'raw' });
try {
console.log(changes);
}
catch (ex) { }
alert("Please see the log of changes in your browser console.");
}
},
options: { disabled: true }
},
{ type: 'separator' },
{ type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', cls: 'changes', listener:
{ "click": function (evt, ui) {
$grid.pqGrid("history", { method: 'undo' });
}
},
options: { disabled: true }
},
{ type: 'button', icon: 'ui-icon-arrowrefresh-1-s', label: 'Redo', listener:
{ "click": function (evt, ui) {
$grid.pqGrid("history", { method: 'redo' });
}
},
options: { disabled: true }
},
{ type: "<span style='margin:5px;'>Filter</span>" },
{ type: 'textbox', attr: 'placeholder="Enter your keyword"', cls: "filterValue", listeners: [{ 'change': filterhandler}] },
{ type: 'select', cls: "filterColumn",
listeners: [{ 'change': filterhandler}],
options: function (ui) {
var CM = ui.colModel;
var opts = [{ '': '[ All Fields ]'}];
for (var i = 0; i < CM.length; i++) {
var column = CM[i];
var obj = {};
obj[column.dataIndx] = column.title;
opts.push(obj);
}
return opts;
}
},
{ type: 'select', style: "margin:0px 5px;", cls: "filterCondition",
listeners: [{ 'change': filterhandler}],
options: [
{ "begin": "Begins With" },
{ "contain": "Contains" },
{ "end": "Ends With" },
{ "notcontain": "Does not contain" },
{ "equal": "Equal To" },
{ "notequal": "Not Equal To" },
{ "empty": "Empty" },
{ "notempty": "Not Empty" },
{ "less": "Less Than" },
{ "great": "Great Than" }
]
}
]
},
scrollModel: {
autoFit: true
},
selectionModel: {
type: 'cell'
},
swipeModel: { on: false },
editModel: {
onBlur: 'validate',
saveKey: $.ui.keyCode.ENTER
},
editor: {
select: true
},
title: "<b>Batch Editing</b>",
history: function (evt, ui) {
var $grid = $(this);
if (ui.canUndo != null) {
$("button.changes", $grid).button("option", { disabled: !ui.canUndo });
}
if (ui.canRedo != null) {
$("button:contains('Redo')", $grid).button("option", "disabled", !ui.canRedo);
}
$("button:contains('Undo')", $grid).button("option", { label: 'Undo (' + ui.num_undo + ')' });
$("button:contains('Redo')", $grid).button("option", { label: 'Redo (' + ui.num_redo + ')' });
},
colModel: [
{ title: "Product ID", dataType: "integer", dataIndx: "ProductID", editable: false, width: 80 },
{ title: "Product Name", width: 165, dataType: "string", dataIndx: "ProductName",
validations: [
{ type: 'minLen', value: 1, msg: "Required" },
{ type: 'maxLen', value: 40, msg: "length should be <= 40" }
]
},
{ title: "Quantity Per Unit", width: 140, dataType: "string", align: "right", dataIndx: "QuantityPerUnit",
validations: [
{ type: 'minLen', value: 1, msg: "Required." },
{ type: 'maxLen', value: 20, msg: "length should be <= 20" }
]
},
{ title: "Unit Price", width: 100, dataType: "float", align: "right", dataIndx: "UnitPrice",
validations: [{ type: 'gt', value: 0.5, msg: "should be > 0.5"}],
render: function (ui) {
//debugger;
var cellData = ui.cellData;
if (cellData != null) {
return "$" + parseFloat(ui.cellData).toFixed(2);
}
else {
return "";
}
}
},
{ hidden: true },
{ title: "Units In Stock", width: 100, dataType: "integer", align: "right", dataIndx: "UnitsInStock",
validations: [{ type: 'gte', value: 1, msg: "should be >= 1" },
{ type: 'lte', value: 1000, msg: "should be <= 1000" }
]
},
{ title: "Discontinued", width: 100, dataType: "bool", align: "center", dataIndx: "Discontinued",
editor: { type: "checkbox", subtype: 'triple', style: "margin:3px 5px;" },
validations: [{ type: 'nonEmpty', msg: "Required"}]
},
{ title: "", editable: false, minWidth: 83, sortable: false,
render: function (ui) {
return "<button type='button' class='delete_btn'>Delete</button>";
}
}
],
pageModel: { type: "local", rPP: 20 },
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "ProductID",
url: "/pro/products/get", //for ASP.NET
//url: "/pro/products.php", //for PHP
getData: function (response) {
return { data: response.data };
}
},
refresh: function () {
$("#grid_editing").find("button.delete_btn").button({ icons: { primary: 'ui-icon-scissors'} })
.unbind("click")
.bind("click", function (evt) {
var $tr = $(this).closest("tr");
var obj = $grid.pqGrid("getRowIndx", { $tr: $tr });
var rowIndx = obj.rowIndx;
$grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
var ans = window.confirm("Are you sure to delete row No " + (rowIndx + 1) + "?");
$grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
if (ans) {
$grid.pqGrid("deleteRow", { rowIndx: rowIndx });
}
});
}
};
var $grid = $("#grid_editing").pqGrid(obj);
});
6
Bug Report / Filter, add row, then save, remove filter - nbr of rows double
« on: August 21, 2015, 04:17:24 am »
Hi there,
Our testers have found an interesting behaviour which I'd like to bring to your attention. I can reproduce the problem by using the 'Batch editing' demo and replacing the sample code with the code below. Then do an 'Edit and Run' (which is BTW a great feature - thanks!).
The following step will then reproduce the issue:
actual value : 2n+1 items; plus the grid now contains every 'original row' twice.
This is a grid issue - not an underlying data issue - a complete refresh on the browser will then display n+1 items
Please note - the entire grid is refreshed (our application requires this) - see 'success' callback in $.ajax in saveChanges function.
Best regards and thanks in advance
(function() {
function filterhandler(evt, ui) {
debugger;
var $grid = $("#grid_editing");
var $toolbar = $grid.find('.pq-toolbar'),
$value = $toolbar.find(".filterValue"),
value = $value.val(),
condition = $toolbar.find(".filterCondition").val(),
dataIndx = $toolbar.find(".filterColumn").val(),
filterObject;
if (dataIndx == "") {//search through all fields when no field selected.
filterObject = [];
var CM = $grid.pqGrid("getColModel");
for (var i = 0, len = CM.length; i < len; i++) {
var dataIndx = CM.dataIndx;
filterObject.push({ dataIndx: dataIndx, condition: condition, value: value });
}
}
else {//search through selected field.
filterObject = [{ dataIndx: dataIndx, condition: condition, value: value}];
}
$grid.pqGrid("filter", {
oper: 'replace',
data: filterObject
});
}
//called when save changes button is clicked.
function saveChanges() {
var grid = $grid.pqGrid('getInstance').grid;
//debugger;
//attempt to save editing cell.
if (grid.saveEditCell() === false) {
return false;
}
var isDirty = grid.isDirty();
if (isDirty) {
//validate the new added rows.
var addList = grid.getChanges().addList;
//debugger;
for (var i = 0; i < addList.length; i++) {
var rowData = addList;
var isValid = grid.isValid({ "rowData": rowData }).valid;
if (!isValid) {
return;
}
}
var changes = grid.getChanges({ format: "byVal" });
//post changes to server
$.ajax({
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
grid.showLoading();
},
url: "/pro/products/batch", //for ASP.NET, java
data: { list: JSON.stringify(changes) },
success: function (changes) {
//debugger;
grid.commit();
grid.refreshDataAndView();
grid.history({ method: 'reset' });
},
complete: function () {
grid.hideLoading();
}
});
}
}
var obj = {
hwrap: false,
resizable: true,
rowBorders: false,
virtualX: true,
numberCell: { show: true },
filterModel: { mode: 'OR', type: "local" },
trackModel: {on: true}, //to turn on the track changes.
toolbar: {
items: [
{ type: 'button', icon: 'ui-icon-plus', label: 'New Product', listener:
{ "click": function (evt, ui) {
//append empty row at the end.
var rowData = { UnitPrice: 1, ProductID: 34, UnitPrice: 0.2 }; //empty row
var rowIndx = $grid.pqGrid("addRow", { rowData: rowData, checkEditable: true });
$grid.pqGrid("goToPage", { rowIndx: rowIndx });
$grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
}
}
},
{ type: 'separator' },
{ type: 'button', icon: 'ui-icon-disk', label: 'Save Changes', cls: 'changes', listener:
{ "click": function (evt, ui) {
saveChanges();
}
},
options: { disabled: true }
},
{ type: 'button', icon: 'ui-icon-cancel', label: 'Reject Changes', cls: 'changes', listener:
{ "click": function (evt, ui) {
$grid.pqGrid("rollback");
$grid.pqGrid("history", { method: 'resetUndo' });
}
},
options: { disabled: true }
},
{ type: 'button', icon: 'ui-icon-cart', label: 'Get Changes', cls: 'changes', listener:
{ "click": function (evt, ui) {
var changes = $grid.pqGrid("getChanges", { format: 'raw' });
try {
console.log(changes);
}
catch (ex) { }
alert("Please see the log of changes in your browser console.");
}
},
options: { disabled: true }
},
{ type: 'separator' },
{ type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', cls: 'changes', listener:
{ "click": function (evt, ui) {
$grid.pqGrid("history", { method: 'undo' });
}
},
options: { disabled: true }
},
{ type: 'button', icon: 'ui-icon-arrowrefresh-1-s', label: 'Redo', listener:
{ "click": function (evt, ui) {
$grid.pqGrid("history", { method: 'redo' });
}
},
options: { disabled: true }
},
{ type: "<span style='margin:5px;'>Filter</span>" },
{ type: 'textbox', attr: 'placeholder="Enter your keyword"', cls: "filterValue", listeners: [{ 'change': filterhandler}] },
{ type: 'select', cls: "filterColumn",
listeners: [{ 'change': filterhandler}],
options: function (ui) {
var CM = ui.colModel;
var opts = [{ '': '[ All Fields ]'}];
for (var i = 0; i < CM.length; i++) {
var column = CM;
var obj = {};
obj[column.dataIndx] = column.title;
opts.push(obj);
}
return opts;
}
},
{ type: 'select', style: "margin:0px 5px;", cls: "filterCondition",
listeners: [{ 'change': filterhandler}],
options: [
{ "begin": "Begins With" },
{ "contain": "Contains" },
{ "end": "Ends With" },
{ "notcontain": "Does not contain" },
{ "equal": "Equal To" },
{ "notequal": "Not Equal To" },
{ "empty": "Empty" },
{ "notempty": "Not Empty" },
{ "less": "Less Than" },
{ "great": "Great Than" }
]
}
]
},
scrollModel: {
autoFit: true
},
selectionModel: {
type: 'cell'
},
swipeModel: { on: false },
editModel: {
onBlur: 'validate',
saveKey: $.ui.keyCode.ENTER
},
editor: {
select: true
},
title: "<b>Batch Editing</b>",
history: function (evt, ui) {
var $grid = $(this);
if (ui.canUndo != null) {
$("button.changes", $grid).button("option", { disabled: !ui.canUndo });
}
if (ui.canRedo != null) {
$("button:contains('Redo')", $grid).button("option", "disabled", !ui.canRedo);
}
$("button:contains('Undo')", $grid).button("option", { label: 'Undo (' + ui.num_undo + ')' });
$("button:contains('Redo')", $grid).button("option", { label: 'Redo (' + ui.num_redo + ')' });
},
colModel: [
{ title: "Product ID", dataType: "integer", dataIndx: "ProductID", editable: false, width: 80 },
{ title: "Product Name", width: 165, dataType: "string", dataIndx: "ProductName",
validations: [
{ type: 'minLen', value: 1, msg: "Required" },
{ type: 'maxLen', value: 40, msg: "length should be <= 40" }
]
},
{ title: "Quantity Per Unit", width: 140, dataType: "string", align: "right", dataIndx: "QuantityPerUnit",
validations: [
{ type: 'minLen', value: 1, msg: "Required." },
{ type: 'maxLen', value: 20, msg: "length should be <= 20" }
]
},
{ title: "Unit Price", width: 100, dataType: "float", align: "right", dataIndx: "UnitPrice",
validations: [{ type: 'gt', value: 0.5, msg: "should be > 0.5"}],
render: function (ui) {
//debugger;
var cellData = ui.cellData;
if (cellData != null) {
return "$" + parseFloat(ui.cellData).toFixed(2);
}
else {
return "";
}
}
},
{ hidden: true },
{ title: "Units In Stock", width: 100, dataType: "integer", align: "right", dataIndx: "UnitsInStock",
validations: [{ type: 'gte', value: 1, msg: "should be >= 1" },
{ type: 'lte', value: 1000, msg: "should be <= 1000" }
]
},
{ title: "Discontinued", width: 100, dataType: "bool", align: "center", dataIndx: "Discontinued",
editor: { type: "checkbox", subtype: 'triple', style: "margin:3px 5px;" },
validations: [{ type: 'nonEmpty', msg: "Required"}]
},
{ title: "", editable: false, minWidth: 83, sortable: false,
render: function (ui) {
return "<button type='button' class='delete_btn'>Delete</button>";
}
}
],
pageModel: { type: "local", rPP: 20 },
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "ProductID",
url: "/pro/products/get", //for ASP.NET
//url: "/pro/products.php", //for PHP
getData: function (response) {
return { data: response.data };
}
},
refresh: function () {
$("#grid_editing").find("button.delete_btn").button({ icons: { primary: 'ui-icon-scissors'} })
.unbind("click")
.bind("click", function (evt) {
var $tr = $(this).closest("tr");
var obj = $grid.pqGrid("getRowIndx", { $tr: $tr });
var rowIndx = obj.rowIndx;
$grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
var ans = window.confirm("Are you sure to delete row No " + (rowIndx + 1) + "?");
$grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
if (ans) {
$grid.pqGrid("deleteRow", { rowIndx: rowIndx });
}
});
}
};
var $grid = $("#grid_editing").pqGrid(obj);
})
Our testers have found an interesting behaviour which I'd like to bring to your attention. I can reproduce the problem by using the 'Batch editing' demo and replacing the sample code with the code below. Then do an 'Edit and Run' (which is BTW a great feature - thanks!).
The following step will then reproduce the issue:
- record the number of rows - Displaying ... n items
- set up a filter - eg. filter value 'a'
- Add 1 rew record
- Save the changes
- Remove the filter
- check the number of rows
actual value : 2n+1 items; plus the grid now contains every 'original row' twice.
This is a grid issue - not an underlying data issue - a complete refresh on the browser will then display n+1 items
Please note - the entire grid is refreshed (our application requires this) - see 'success' callback in $.ajax in saveChanges function.
Best regards and thanks in advance
(function() {
function filterhandler(evt, ui) {
debugger;
var $grid = $("#grid_editing");
var $toolbar = $grid.find('.pq-toolbar'),
$value = $toolbar.find(".filterValue"),
value = $value.val(),
condition = $toolbar.find(".filterCondition").val(),
dataIndx = $toolbar.find(".filterColumn").val(),
filterObject;
if (dataIndx == "") {//search through all fields when no field selected.
filterObject = [];
var CM = $grid.pqGrid("getColModel");
for (var i = 0, len = CM.length; i < len; i++) {
var dataIndx = CM.dataIndx;
filterObject.push({ dataIndx: dataIndx, condition: condition, value: value });
}
}
else {//search through selected field.
filterObject = [{ dataIndx: dataIndx, condition: condition, value: value}];
}
$grid.pqGrid("filter", {
oper: 'replace',
data: filterObject
});
}
//called when save changes button is clicked.
function saveChanges() {
var grid = $grid.pqGrid('getInstance').grid;
//debugger;
//attempt to save editing cell.
if (grid.saveEditCell() === false) {
return false;
}
var isDirty = grid.isDirty();
if (isDirty) {
//validate the new added rows.
var addList = grid.getChanges().addList;
//debugger;
for (var i = 0; i < addList.length; i++) {
var rowData = addList;
var isValid = grid.isValid({ "rowData": rowData }).valid;
if (!isValid) {
return;
}
}
var changes = grid.getChanges({ format: "byVal" });
//post changes to server
$.ajax({
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
grid.showLoading();
},
url: "/pro/products/batch", //for ASP.NET, java
data: { list: JSON.stringify(changes) },
success: function (changes) {
//debugger;
grid.commit();
grid.refreshDataAndView();
grid.history({ method: 'reset' });
},
complete: function () {
grid.hideLoading();
}
});
}
}
var obj = {
hwrap: false,
resizable: true,
rowBorders: false,
virtualX: true,
numberCell: { show: true },
filterModel: { mode: 'OR', type: "local" },
trackModel: {on: true}, //to turn on the track changes.
toolbar: {
items: [
{ type: 'button', icon: 'ui-icon-plus', label: 'New Product', listener:
{ "click": function (evt, ui) {
//append empty row at the end.
var rowData = { UnitPrice: 1, ProductID: 34, UnitPrice: 0.2 }; //empty row
var rowIndx = $grid.pqGrid("addRow", { rowData: rowData, checkEditable: true });
$grid.pqGrid("goToPage", { rowIndx: rowIndx });
$grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
}
}
},
{ type: 'separator' },
{ type: 'button', icon: 'ui-icon-disk', label: 'Save Changes', cls: 'changes', listener:
{ "click": function (evt, ui) {
saveChanges();
}
},
options: { disabled: true }
},
{ type: 'button', icon: 'ui-icon-cancel', label: 'Reject Changes', cls: 'changes', listener:
{ "click": function (evt, ui) {
$grid.pqGrid("rollback");
$grid.pqGrid("history", { method: 'resetUndo' });
}
},
options: { disabled: true }
},
{ type: 'button', icon: 'ui-icon-cart', label: 'Get Changes', cls: 'changes', listener:
{ "click": function (evt, ui) {
var changes = $grid.pqGrid("getChanges", { format: 'raw' });
try {
console.log(changes);
}
catch (ex) { }
alert("Please see the log of changes in your browser console.");
}
},
options: { disabled: true }
},
{ type: 'separator' },
{ type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', cls: 'changes', listener:
{ "click": function (evt, ui) {
$grid.pqGrid("history", { method: 'undo' });
}
},
options: { disabled: true }
},
{ type: 'button', icon: 'ui-icon-arrowrefresh-1-s', label: 'Redo', listener:
{ "click": function (evt, ui) {
$grid.pqGrid("history", { method: 'redo' });
}
},
options: { disabled: true }
},
{ type: "<span style='margin:5px;'>Filter</span>" },
{ type: 'textbox', attr: 'placeholder="Enter your keyword"', cls: "filterValue", listeners: [{ 'change': filterhandler}] },
{ type: 'select', cls: "filterColumn",
listeners: [{ 'change': filterhandler}],
options: function (ui) {
var CM = ui.colModel;
var opts = [{ '': '[ All Fields ]'}];
for (var i = 0; i < CM.length; i++) {
var column = CM;
var obj = {};
obj[column.dataIndx] = column.title;
opts.push(obj);
}
return opts;
}
},
{ type: 'select', style: "margin:0px 5px;", cls: "filterCondition",
listeners: [{ 'change': filterhandler}],
options: [
{ "begin": "Begins With" },
{ "contain": "Contains" },
{ "end": "Ends With" },
{ "notcontain": "Does not contain" },
{ "equal": "Equal To" },
{ "notequal": "Not Equal To" },
{ "empty": "Empty" },
{ "notempty": "Not Empty" },
{ "less": "Less Than" },
{ "great": "Great Than" }
]
}
]
},
scrollModel: {
autoFit: true
},
selectionModel: {
type: 'cell'
},
swipeModel: { on: false },
editModel: {
onBlur: 'validate',
saveKey: $.ui.keyCode.ENTER
},
editor: {
select: true
},
title: "<b>Batch Editing</b>",
history: function (evt, ui) {
var $grid = $(this);
if (ui.canUndo != null) {
$("button.changes", $grid).button("option", { disabled: !ui.canUndo });
}
if (ui.canRedo != null) {
$("button:contains('Redo')", $grid).button("option", "disabled", !ui.canRedo);
}
$("button:contains('Undo')", $grid).button("option", { label: 'Undo (' + ui.num_undo + ')' });
$("button:contains('Redo')", $grid).button("option", { label: 'Redo (' + ui.num_redo + ')' });
},
colModel: [
{ title: "Product ID", dataType: "integer", dataIndx: "ProductID", editable: false, width: 80 },
{ title: "Product Name", width: 165, dataType: "string", dataIndx: "ProductName",
validations: [
{ type: 'minLen', value: 1, msg: "Required" },
{ type: 'maxLen', value: 40, msg: "length should be <= 40" }
]
},
{ title: "Quantity Per Unit", width: 140, dataType: "string", align: "right", dataIndx: "QuantityPerUnit",
validations: [
{ type: 'minLen', value: 1, msg: "Required." },
{ type: 'maxLen', value: 20, msg: "length should be <= 20" }
]
},
{ title: "Unit Price", width: 100, dataType: "float", align: "right", dataIndx: "UnitPrice",
validations: [{ type: 'gt', value: 0.5, msg: "should be > 0.5"}],
render: function (ui) {
//debugger;
var cellData = ui.cellData;
if (cellData != null) {
return "$" + parseFloat(ui.cellData).toFixed(2);
}
else {
return "";
}
}
},
{ hidden: true },
{ title: "Units In Stock", width: 100, dataType: "integer", align: "right", dataIndx: "UnitsInStock",
validations: [{ type: 'gte', value: 1, msg: "should be >= 1" },
{ type: 'lte', value: 1000, msg: "should be <= 1000" }
]
},
{ title: "Discontinued", width: 100, dataType: "bool", align: "center", dataIndx: "Discontinued",
editor: { type: "checkbox", subtype: 'triple', style: "margin:3px 5px;" },
validations: [{ type: 'nonEmpty', msg: "Required"}]
},
{ title: "", editable: false, minWidth: 83, sortable: false,
render: function (ui) {
return "<button type='button' class='delete_btn'>Delete</button>";
}
}
],
pageModel: { type: "local", rPP: 20 },
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "ProductID",
url: "/pro/products/get", //for ASP.NET
//url: "/pro/products.php", //for PHP
getData: function (response) {
return { data: response.data };
}
},
refresh: function () {
$("#grid_editing").find("button.delete_btn").button({ icons: { primary: 'ui-icon-scissors'} })
.unbind("click")
.bind("click", function (evt) {
var $tr = $(this).closest("tr");
var obj = $grid.pqGrid("getRowIndx", { $tr: $tr });
var rowIndx = obj.rowIndx;
$grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
var ans = window.confirm("Are you sure to delete row No " + (rowIndx + 1) + "?");
$grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
if (ans) {
$grid.pqGrid("deleteRow", { rowIndx: rowIndx });
}
});
}
};
var $grid = $("#grid_editing").pqGrid(obj);
})
7
Help for ParamQuery Pro / Re: Copy and Paste functionality only for Existing row
« on: July 22, 2015, 10:12:35 am »
Thanks heaps for your quick reply!
8
Help for ParamQuery Pro / Pasting into cells should potentially run editors
« on: July 21, 2015, 02:48:25 am »
Hi there,
We found an interesting behaviour with regard to pasting into cells. Say you have a custom cell editor using for instance jquery.inputmask. The editor only allows certain characters and discards chars which are not in in the allowed character set.
If a given cell is in input mode all is fine and the editor does what it is supposed to do - keeping the associated data 'clean'.
If the user pastes data - either by pasting multiple cells or by putting the given cell into selected mode (but not input) by pressing Escape - all characters are pasted - even the ones which would have be taken out otherwise by the editor had the cell been in input mode. The net result is that the underlying datamodel now contains data which is not allowed. The grids also displays this data.
There is of course a way around the display issue by using render, and also validations could be used, but from my understanding in the case of paste (as outlined above) there is no way to fix the data pasted.
Any hints are very much appreciated.
We found an interesting behaviour with regard to pasting into cells. Say you have a custom cell editor using for instance jquery.inputmask. The editor only allows certain characters and discards chars which are not in in the allowed character set.
If a given cell is in input mode all is fine and the editor does what it is supposed to do - keeping the associated data 'clean'.
If the user pastes data - either by pasting multiple cells or by putting the given cell into selected mode (but not input) by pressing Escape - all characters are pasted - even the ones which would have be taken out otherwise by the editor had the cell been in input mode. The net result is that the underlying datamodel now contains data which is not allowed. The grids also displays this data.
There is of course a way around the display issue by using render, and also validations could be used, but from my understanding in the case of paste (as outlined above) there is no way to fix the data pasted.
Any hints are very much appreciated.
9
Help for ParamQuery Pro / Batch editing: undo of a delete does not indicate changes made prior
« on: July 13, 2015, 08:46:47 am »
Our tester has found the following scenario.
Using the sample grid Inline editing/Batch editing.
Do the following:
1) in line x change say 'units per stock' value to a new value Y. The change is indicated by the top left red triangle.
2) delete line x
3) undo once - this restores line x - but now the red triangle is missing - only showing the new Y value. Expected behavior is that Y is shown (which happens) and the red triangle as well.
NB: (a subsequent undo/followed by a redo) corrects the issue).
Not a big deal - just letting you know.
Using the sample grid Inline editing/Batch editing.
Do the following:
1) in line x change say 'units per stock' value to a new value Y. The change is indicated by the top left red triangle.
2) delete line x
3) undo once - this restores line x - but now the red triangle is missing - only showing the new Y value. Expected behavior is that Y is shown (which happens) and the red triangle as well.
NB: (a subsequent undo/followed by a redo) corrects the issue).
Not a big deal - just letting you know.
10
News / Re: Upgrade to Pro Version 2.3.0
« on: June 19, 2015, 06:14:51 am »
would you mind posting a sample on how you envisaged 'warning' to be done from 2.3 onwards. I managed to get the blue triangle in the right top corner by setting warn:true inside the validator. Alas the warning message does not appear. I had already a look at the http://paramquery.com/pro/demos/editing_custom2 - but this one does not use the warn feature.
I should add that I am using a my own custom validation function.
Thanks heaps in advance
I should add that I am using a my own custom validation function.
Thanks heaps in advance
11
Help for ParamQuery Pro / Re: get hold of data that includes current changes
« on: June 13, 2015, 10:56:12 am »
Thanks for your quick reply.
Just to make sure that I understand your suggestion; in order to get hold of the data currently displayed in the grid (containing all changes) I have to merge the result from getData() and getChange() first together. This is not a problem, but rather onerous ....
Just to make sure that I understand your suggestion; in order to get hold of the data currently displayed in the grid (containing all changes) I have to merge the result from getData() and getChange() first together. This is not a problem, but rather onerous ....
12
Help for ParamQuery Pro / get hold of data that includes current changes
« on: June 13, 2015, 06:46:34 am »
We are using batch editing - and about to write a validator that pops up a warning when the currently data which has just been entered is a non unique within the column. Our uniqueness check should also check against any unsaved changes (in the current batch editing session).
$this.pqGrid("getData") seems to return the original data - what's the trick to get hold of data that includes unsaved changes?
$this.pqGrid("getData") seems to return the original data - what's the trick to get hold of data that includes unsaved changes?
Pages: [1]