Show Posts

1

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

2

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:

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

3

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:

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

expected value: n+1 items
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);

})

4

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.

5

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.

6

Help for ParamQuery Pro / get hold of data that includes current changes

« on: June 13, 2015, 06:46:34 am »