Topics

1

Suggest new features / Add a selectionModel.mode = "none"

« on: June 29, 2024, 12:03:43 am »

Adding a selectionModel.mode = "none" prevents rows, cells, columns, etc. from being selected which makes it good for a selector when there are checkboxes.

For example if I had a tree with checkboxes on each node and all I am using the tree for is selecting checkboxes, selecting a row, column or cell is of no use.  This is evident on column filters (see here https://paramquery.com/pro/demos), there is no point having a selected row in the drop down filter.

Also it would be nice to have an option when clicking the whole row (outside the text) to select/deselect the checkbox

2

Bug Report / Bug when grid inside a jQueryUI dialog

« on: June 27, 2024, 03:25:00 pm »

If I create a jQuery UI dialog on while initialising a page, and the dialog is hidden (autoOpen set to false) and the dialog contains a pqGrid, I get the attached error in the console when the screen size changes but ONLY if the dialog has not been made visible yet.  Once the dialog has been made visible there is no problem.  The pqGrid only does this when virtualWin:true is set.

I changed line 27596 to the following which fixes the attached error as dims is not defined for a pqGrid that has never been visible:

Code: [Select]

htContClient = left ? dims.wdContClient : (typeof(dims)!=="undefined" ? dims.htContClient : 0),
The issue with above is that I then get an exception thrown caused by the if statement on 27622:

Code: [Select]

if (!(bottom >= 0) || !(top >= 0)) {
throw "top bottom NaN"
}
The exception doesn't cause any issues as far as I can tell.

3

Help for ParamQuery Pro / Getting rid of the ellipsis in some header columns not working

« on: June 11, 2024, 06:13:09 pm »

Setting the following colModel attributes does not work:

Code: [Select]

{dataIndx:"NOTE", dataType:"stringi", title:lang.noteTxt, halign:"center", sortable: false,
render:function(ui){ return { cls: "italictext", attr:{title:ui.rowData["NOTE"]} };}
},
{dataIndx:"IS_STOCK", dataType:"int", minWidth:25, width:25, maxWidth:25, halign:"center", sortable: false, title:'<span class="ui-icon ui-icon-gear"></span>',
attrHead: {title:lang.edit_item_kind[2], style:"text-overflow:unset"},
styleHead: {"text-overflow":"unset"},
render:function(ui){ return { text: ui.cellData>0 ? "&check;" : "" };}
},
{dataIndx:"IS_CONSUMABLE", dataType:"int", minWidth:25, width:25, maxWidth:25, halign:"center", sortable: false, title:'<span class="ui-icon ui-icon-cart-b"></span>',
attrHead: {title:lang.edit_item_kind[1]},
render:function(ui){ return { text: ui.cellData>0 ? "&check;" : "" };}
},
{dataIndx:"IS_LABOUR", dataType:"int", minWidth:25, width:25, maxWidth:25, halign:"center", sortable: false, title:'<span class="ui-icon ui-icon-person"></span>',
attrHead: {title:lang.edit_item_kind[4]},
render:function(ui){ return { text: ui.cellData>0 ? "&check;" : "" };}
}
The reason is that the ellipsis is set in a child div so setting attrHead or styleHead has no affect.  I only need to get rid of it on 3 columns out of 5.  The reason is that it shouldn't be there, but appears due to a re-sizing and the fact that I am using a jQuery icon

4

Bug Report / Bug in moveNode event or Tree.getRoots()

« on: May 27, 2024, 02:33:59 am »

In the moveNode event, in the ui we get 3 array values in "args":

0: The nodes that have been moved
1: The new parent (null if root)
2: The new position starting from 1 within the siblings

In the function for the moveNode event; when dragged to the root, args[1] is null, so to get the siblings I need to call Tree.getRoots() which is where the issue is, as this is the data and order is BEFORE the move, whereas args[1].children is the data and order AFTER the move.

As I am using the nested set model in my database (LFT & RGT), there is no way to determine the sibling the moved node is being inserted after.

As moveNode is called AFTER the drag and drop, Tree.getRoots() should be the order and data after the drop, just like args[1].children is.

5

Bug Report / BUG in DND, diHelper not sanitised - Security risk (I've included the bug fix)

« on: May 26, 2024, 08:33:13 pm »

Using the "Drag n drop of rows" demo, set the "diHelper" to "CustomerName" then edit a customer name on any row to: "<script>alert(3)</script>".  Once done drag that row and an alert pops up. 

The "diHelper" HTML text needs to be sanitised/cleaned when it is displayed as currently it is a security risk as it allows code injection.

FIX:

Code: [Select]

getHelper: function(evt) {
var self = this,
that = self.that,
m = self.model,
clsNode = m.clsNode,
$cell = $(evt.target).closest(".pq-grid-cell,.pq-grid-number-cell"),
cellObj = self.cellObj = that.getCellIndices({
$td: $cell
}),
diHelper = m.diHelper || [m.diDrag],
rd = cellObj.rowData,
dragNodes = cellObj.nodes = m.dragNodes.call(that, rd, evt),
txt = m.contentHelper.call(that, diHelper, dragNodes), // <<<<<<<---------- HERE (only changed variable name from html to txt for consistency)
$helper = self.$helper = $(m.tmplHelper),
scale = that.getScale(),
scaleB = pq.getScale(document.body);
$helper.find("span:eq(1)").text(txt);  // <<<<<<<---------- AND HERE (changed ".html(html);" to ".text(txt);")
dragNodes.forEach(function(node) {
that.addClass({
rowData: node,
cls: clsNode
})
});
self.addRejectIcon();
$helper.addClass("pq-theme pq-drag-helper").css(m.cssHelper).data("Drag", self);
$helper.css({
scale: scale[0] / scaleB[0] + " " + scale[1] / scaleB[1],
"transform-origin": "0 0"
});
return $helper[0]
},

6

Help for ParamQuery Pro / Automatically resize columns to autofit

« on: May 23, 2024, 05:33:46 pm »

I have set flex:{on:true} with no width settings on my columns as I want pqGrid to establish the column widths automatically.  How do I do this after the data has been loaded?

My grid switches between data (tabbing different sets of data) so I need the column width calculation to happen after the data has loaded.

Alternatively, when you double click the right edge of the column header, the column resizes.  How can I call that event/method dynamically from JS?

7

Help for ParamQuery Pro / moveNodes issue in Tree

« on: May 20, 2024, 02:15:42 am »

I am trying to manually move a node (not with DND, using only JS) and use the following code:

Code: [Select]

$("#grid").pqGrid("Tree").moveNodes({nodes:[rowData], parent:new_parentId});
When I do above I get a JS error in pqGrid "Uncaught TypeError: t.forEach is not a function"

What am I doing wrong?

8

Suggest new features / Drag drop ability to drag from an entire row or a cell and better drop indicator

« on: May 15, 2024, 06:48:17 pm »

START DRAG ENTIRE ROW CLICK

Instead of dragging to be defined by objects with the class "pq-drag-handle", use an additional class with no styling attached to it, like "pq-drag-handle-element" (or change the icon to pq-drag-handle-icon), meaning the drag icon would have 2 classes, one to style and the other to signify it's purpose as a drag handle.

To currently accomplish this I do the following:

Code: [Select]

treeModel>render: function(ui){ return { cls:"pq-drag-handle", style:"transform:none; transform-origin:0; opacity:1;" } }
I set numberCell.show=false and don't set diDrag.

The above works, but it would be far easier and more adaptable if I could just assign a class to a row, element or cell.

DROP INDICATOR

The current drop indicator is pqGrid is very confusing and not standard, especially the divider line, something I have never seen before so it is not intuitive.  A far more common way to do this is the jsTree method (a seemingly abandoned project now) which can be seen at https://www.jstree.com/demo/. jsTree just shows a small arrow marker either within, above or below the node to signify the drop position, which changes the closer to the top or bottom of the node the cursor gets, which is intuitive and a common standard.  Please can you implement this or something similar?

9

Help for ParamQuery Pro / In a tree grid, make the drag handle the row or a cell

« on: May 15, 2024, 01:21:42 am »

I don't want to use the handle in the number column as I don't want a number column and it's not as user friendly

In the tree model or even column model I have tried adding:

Code: [Select]

render: function(ui){
return {
cls : "pq-drag-handle"
}
}
This works but the font is all over the place.

Ideally I would like it to act like this https://www.jstree.com/demo/ (see first example).  You just click and hold a row, drag it and drop it.  Notice the drop arrow is a very neat way of showing if it before, after or within the node.

How can I do a drag and drop just by clicking on the row and dragging like the above example or similar.

10

Help for ParamQuery Pro / Calculated cell in footer

« on: May 09, 2024, 04:46:30 pm »

I have a grid (see attached) and the only way I could think of to calculate the circled cell is using render:

Code: [Select]

render:function(ui){
if(typeof(ui.rowData["idx"])==="undefined")
{
return {
text: empty(ui.rowData["profit"]) || empty(ui.rowData["revenue"]) ? 0 : floatval(ui.rowData["profit"] / ui.rowData["revenue"], 4)*100 + " %"
}
}
}
This works fine except obviously the value won't export to Excel.  Other options are:

Code: [Select]

groupModel: {
on: true,
header: false,
grandSummary: true,
agg: {
revenue: "sum",
approved_cost: "sum",
unapproved_cost: "sum",
estimated_cost: "sum",
profit: "sum",
//margin: "avg"
}
},
formulas: [
["profit", function(rowData){ return rowData["revenue"] - rowData["approved_cost"] - rowData["unapproved_cost"] - rowData["estimated_cost"]; }],
["margin", function(rowData) {
return !rowData["profit"] || !rowData["revenue"] ? 0 : rowData["profit"] / rowData["revenue"];
}
]
],
I can't use "avg" because of the "0" cells (thus commented) that cause the cell calculation to be incorrect.

Is there a way calculate the footer cell so that it exports to Excel (without using "exportRender" due to an Excel issue), basically the calculation for that row is profit/revenue (being based on the cells on the footer row) or even make it use the formula for that column?

11

Suggest new features / In Render allow jQuery object to be returned

« on: May 02, 2024, 12:55:27 am »

In the colModel>render allow jQuery to be returned and not just a string for the content.

12

Bug Report / MINOR BUG: Lazy loading dataModel > getData( response, textStatus)

« on: May 01, 2024, 10:15:28 pm »

In dataModel > getData(response, textStatus, jqXHR), if there is a 404 or any other error, the function is not called and obviously "textStatus" is not set.

13

Suggest new features / Lazy Loading scroll bar suggestion

« on: May 01, 2024, 10:11:39 pm »

Using https://paramquery.com/pro/demos/infinite_scroll as an example, can we have an option (not compulsory as I like the current way as well) to make the scroll bar seem as if there are "totalRecords" in the grid instead of just the loaded ones.

Please do not remove the current way, just give an option to have these "empty rows" so that the scroll bar shows correctly.

May I suggest that if "totalRecords" is not passed then it uses the old method and bases the scroll bar on how many rows.

I have tried setting I tried setting "paging.rPP" and returning { "curPage:":response.curPage, "data":response.data, "totalRecords":response.totalRecords }, but it does nothing.

Issues and workflows I can see are:

• The "curPage" number would always need to be sent and returned.
• The "num_rows" per page would need to be sent and constant from the first page
• If "totalRecords" is different to the initially returned number, then the out of view top and bottom virtual spacing would need to be changed accordingly to correctly draw the scroll bar.
• If the view has been scrolled to fit between two pages, there needs to be a flag to make sure the grid waits for the first page to load before it loads a second ("pending" flag in the example).
• Page loading of empty pages should only start when scrolling stops, and maybe also include a variable for how many milliseconds to pause before loading the next page starts after the scroll stop, which is reset if scrolling starts again within that time.

The

14

Suggest new features / PQGrid Filter : type=<select>

« on: May 01, 2024, 07:47:04 pm »

I know the <select> isn't available in v9 as a filter, but for the next version please could it be added as an additional option, as sometimes something simple is only needed. 

I use the current method of the drop down grid a lot and please don't change it.  However, sometimes when we only have a few single options to filter, it is too much and doesn't work as well on mobile devices, so an alternative simple option would be great.

15

Help for ParamQuery Pro / How to link check boxes and select row

« on: May 01, 2024, 04:47:05 pm »

Is there a way or setting to link the checkboxes and the row select, so that when a row is selected/unselected, the checkbox is checked/unchecked and visa-versa?

There is no scientific reason for this apart from backwards similarity, as this is how the previous grid we used worked on multi row select. Some grids we want them to look and feel similar for only this reason.