Messages

1

Bug Report / Re: Bug when grid inside a jQueryUI dialog

« on: July 21, 2024, 08:38:29 am »

I fixed this by adding the following code:

Insert new line 27564 in calcTopBottom:

Code: [Select]

if(typeof(this.dims)==="undefined") return 0;
Insert new line 27655 in getLeft: (was 27654)

Code: [Select]

if(typeof(this.leftArr)==="undefined") return 0;
Will this fix or an alternative be added in the next release?

CAUSE

When the grid is added to a hidden jQuery UI dialog or a hidden grid and the parent or screen is resized, this bug appears.  If the parent is later made visible, then the bug stops happening because this.dimms and this.leftArr get defined on first visble refresh.

2

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

3

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.

4

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

« on: June 20, 2024, 07:29:08 pm »

But it effects all other grids and columns, I only want 3 out of 5 columns to not have the elipsis

5

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

« on: June 11, 2024, 11:16:24 pm »

I can't as some columns sort and I need that.  Also my CSS is shared across multiple pages and they use the sorting icons, etc.

It's not that major, but if you could in the next version give some way of removing ellipsis that would be great.

BTW hwrap is false not true

6

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

« on: June 11, 2024, 11:00:01 pm »

I added the columns to the end, using Cupertino theme (JQuery) in you demo and the Ellipsis were there, albeit just one dot of them.  Make sure screen is as wide as possible.

See screen shot attached

Resizing the screen seems to make them go, but I think that is only because the columns are thinner.

7

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

8

Bug Report / Re: Bug in moveNode event or Tree.getRoots() - FIX

« on: May 27, 2024, 09:34:27 pm »

The only way I managed to fix this was by doing a setTimeout.

Code: [Select]

moveNodes: function() {

   console.log($.extend({}, $("#tree").pqGrid("Tree").getRoots()) ); // <<<------------ OLD ORDER BEFORE THE MOVE

   setTimeout(function(){
       console.log($.extend({}, $("#tree").pqGrid("Tree").getRoots()) );   // <<<------------ DIFFERENT & CORRECT ORDER COMPARED TO ABOVE
   }, 1);
}

9

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

« on: May 27, 2024, 02:41:30 am »

Understood, but my point is that textStatus will always be "success", so I'm not sure why it is used.

10

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.

11

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]
},

12

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?

13

Help for ParamQuery Pro / Re: moveNodes issue in Tree

« on: May 21, 2024, 05:51:04 pm »

I'm only moving one node from one parent to another BTW.

Even if I don't set parent and omit it I still get the error, so the error is caused by the "nodes" value.

14

Help for ParamQuery Pro / Re: moveNodes issue in Tree

« on: May 21, 2024, 05:09:28 pm »

I tried that and it still causes the same error:

Code: [Select]

tree.moveNodes({nodes:[rowData], parent:parent});
I even tried:

Code: [Select]

tree.moveNodes({nodes:[ tree.getNode(rowData["ID"]) ], parent:tree.getNode(parent["ID"])});

15

Help for ParamQuery Pro / Re: moveNodes issue in Tree

« on: May 20, 2024, 05:34:24 am »

Forgot to say, error is generated in "getUniqueNodes"