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.


Topics - jplevene

Pages: [1]
1
Help for ParamQuery Pro / New simple feature requet
« on: March 26, 2024, 08:49:26 pm »
In the filter in the colModel, for compare, add the ui or rowData parameter so that we can use the rowData, as sometimes a cell is rendered or formatted to include data from other columns or data.

Code: [Select]
        //override range compare function.
        conditions: {
            range:{
                //override compare property of range condition.
                compare: (cellData, value, value2, ui) => boolean
            }
        }

2
Help for ParamQuery Pro / Minor bug in filter
« on: March 26, 2024, 06:46:04 pm »
On the drop down arrow, text is behind it if it is wide so you can't really make out the arrow (see image).  I am using JQuery UI themes.  My colModel column code is:

Code: [Select]
{dataIndx:"STATUS", minWidth:40, width:70, maxWidth:100, title:"Status", halign:"center",
format:function(c){ return equip_status_values[ c ]; }, // Draws value in the select
filter:{
style: "text-align:left",
crules: [{condition: "range", value:[0, 1]}],
options: status_vals,
gridOptions: {
stripeRows: false,
height: "flex",
showHeader: false,
filterModel: {header: false},
refresh: function(event, ui){
// Make the grid width not too wide
this.element.parent().width(120);
}
}
}
},

3
Bug Report / selectionModel - toggle - BUG
« on: March 16, 2024, 01:08:27 am »
When I have the option set as:
Code: [Select]
selectionModel: {type:"row", mode:"single", column:false, all:false, toggle:false}Double clicking an unselected row makes it unselected even though the toggle is off.

The following is stated in the API for toggle:true: "simple click on selected row removes it from selection".  However that is the case even if toggle is false


4
Help for ParamQuery Pro / Create an empty spreadsheet
« on: February 23, 2024, 08:47:44 pm »
Created a pqGrid and used code below to import a spreadsheet:

        pq.excel.importXl({ url: "https://paramquery.com/pro2/Content/workbook.xlsx" }, function (wb) {
            $("#grid").pqGrid("importWb", { workbook: wb, extraRows: 10, extraCols: 10 });
           $("#grid").pqGrid("hideLoading");
        });

How do I create an empty spreadsheet into my grid without loading an empty xlsx file?  Basically I want to open the grid and it is an empty spreadsheet ready to edit, etc.

SOLVED (See my reply)

5
Help for ParamQuery Pro / Spreadsheet column header cells with <select>
« on: February 23, 2024, 08:33:12 pm »
I have loaded a spreadsheet using the code below.  Ideally below each column name (being a letter), I want to add a <select> dropdown.  The idea being that the user can select a column field name for each column.

This can either be in the existing header cell or a new one below it.  I can't seem to find a column header render which would work as I could set this in the "columnTemplate"

      var grid = $( "<div>", {
         "id" : (function(){ return "pqgrid"+$(".pq-grid").length; })
      })
      .appendTo( dlg )
      .pqGrid({
         autoAddRow: true,
            autoAddCol: true,
         autoRow: true, // Calc height of every row
         dataModel: {data: []},
         colModel : [],
         numberCell: {width: 40}, // The left number cell index column off
         animModel: {on: true, duration: 190}, // Turn on animation
         stripeRows: false,
         menuIcon: false,
         //scrollModel:{autoFit:true}, // show scroll
         flex: {all:false}, // Width of headers auto fit
         fillHandle: "all", // The small square in bottom right of selection for bulk fill
         width: "100%",
         height: 400,
         // DISPLAY
         skipSSFn : true, // Turn off spread sheet functions (speed increase)
         hoverMode: "cell", // on hover change color effect
         dragColumns: {enabled:false},
            showTitle: false,
            showToolbar: false,
         showTop: false, // Hide top  (including col move icons)
         wrap: false, // Cell content on one line
         hwrap: false, // header content on one line
         collapsible: { on: false },
         sortModel: {on: false},
         sortable: false,
         filterModel: { on: false },
         editor: {
                style: { width: 'auto' },
            select: true
            },
         columnTemplate: {
                filter: {
                    crules: [{ condition: 'range' }]
                },
                title: function (ui) {
                    return pq.toLetter(ui.colIndx);
                }
            },
          editModel: {
                addDisableCls: true,
                //onSave: "downFocus"
            }
      });

6
Code: [Select]
rowClick: function(event, ui) {
console.log("rowClick");
// When a row is clicked, select or deselect the check box.  Must be a data row
if(!empty(ui.rowData))
{
var checked = ui.rowData["state"];
// Update the check box.  This causes the issue !!!!
that.infoGrid.pqGrid("updateRow", {rowIndx:ui.rowIndx, newRow:{"state":!checked} });
}
},
rowDblClick: function(event, ui) {
console.log("rowDblClick");
},

The call to updateRow in rowClick prevents the rowDblClick from being triggered.

The idea of rowClick is that a click on the row (not just the check box), selects/unselects the check box.

7
I was looking at lazy loading with scrolling (your example here https://paramquery.com/pro/demos/infinite_scroll).

Your demo has 688 rows and loads 100 rows a page at a time.  The issue is that if I want to scroll to the last row I have to scroll to the bottom 6 times, and the scroll bar is incorrect as it is only proportional for what has loaded, not the amount of rows (688 in this case).

In another grid (jqGrid which is awful, thus the switch to you), all the rows below and out of view are accounted for and the scroll bar is the correct proportion.  The huge issue with jqGrid is that if you scroll to the bottom (CTRL+END), it loads every page between as well, which is beyond dumb (I said it was awful) and needlessly uses server resources.

A better approach would be waiting for scrolling to end with lets say a 100ms timeout, then to load the view page(s) (it might be 2 as the scrolled position might be between pages) if they haven't already been loaded.  A better solution instead of pages, is to use the index of the first row in view with no data loaded and number of rows after that to load.

I know a new lazy loading is coming, any idea when as we want to start to switchover to pqGrid sooner rather than later?

8
Help for ParamQuery Pro / 9.1.1 tree lines wrong
« on: December 21, 2023, 03:52:12 am »
Setting options->treeModel->hideLines to false, there are mistakes in the lines with larger trees.

See attached image.  The red dots in the image are missing lines, and the green circles are extra tails that should not be there.

Also the last item in the tree always has an open node triangle, even if it has no children.

9
Suggest new features / Cross in the search
« on: December 12, 2023, 01:10:01 am »
A simple and quick solution is for v9.1.1, the filter is an input and type="text".  If you make that type="search" and when the "search" event (triggered when user clicks the X) is triggered do the same event as a keypress

10
Help for ParamQuery Pro / missing class "pq-focus-mgr" on the textarea
« on: December 08, 2023, 09:46:31 pm »
The focus textarea no longer has the class "pq-focus-mgr", so when I detect a body keypress, the target is a textarea with no class to distinguish what it is.

In 9.0.2, only the parent div has the class "pq-focus-mgr" and not the textarea like before.

11
Help for ParamQuery Pro / topArr
« on: November 29, 2023, 10:33:25 pm »
Worked fine with 9.0.0, upgraded to 9.1.0 and got the following console error for each grid (see attached).  I changed it to 9.0.2 and it worked fine, so only 9.1.0 has the issue:

Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at pq.cRenderBody.getTop (pqgrid.min.js:34:3135)
    at pq.cRenderBody.getTopSafe (pqgrid.min.js:34:3308)
    at pq.cRenderBody.setPanes (pqgrid.min.js:34:26214)
    at e.<computed>.<computed>.<anonymous> (pqgrid.min.js:34:22372)
    at p (pqgrid.min.js:9:10322)
    at t._trigger (pqgrid.min.js:9:10797)
    at pq.cRenderSum.setPanes (pqgrid.min.js:34:29047)
    at pq.cRenderSum.init (pqgrid.min.js:34:28444)
    at pq.cRenderBody.init (pqgrid.min.js:34:21325)
    at b.paramquery.cRefresh.refresh (pqgrid.min.js:9:126087)

12
Help for ParamQuery Pro / filter->conditions compare to use other data
« on: November 27, 2023, 08:28:09 pm »
In the "compare" I only have access to (cellData, val1, val2), however I need to also take into account data in other other columns as my filter column is rendered using multiple data sources.

How can I do this, besides completing the column data externally.

Code: [Select]
filter: {
    conditions: {
        range: {
            compare: function(cellData, val1, val2) {
                // need to access ui here to get other column data
            }
        }
    }
}

13
Help for ParamQuery Pro / Need to be able to select text in a column
« on: November 08, 2023, 01:15:50 am »
I have a basic grid setup as below, however I want to be able to select the text in the "code" column so that CTRL+C can be pressed to copy it.  Is that possible?  Notice it is select row and there are check boxes.

Code: [Select]
.pqGrid({
dataModel: {data: []},
colModel : [
{dataIndx:"state", maxWidth:30, minWidth:30, align:"center", resizable:false, title:"", menuIcon:false, type:"checkBoxSelection", cls:"ui-state-default", sortable:false, editor:false, dataType:'bool',
                    cb: {
                        all: true, // Checkbox selection in the header affect current page only.
                        header: true // Show checkbox in header.
                    }
                },
{dataIndx:'qty', maxWidth:80, dataType:"float", editable:false},
{dataIndx:'code', maxWidth:100, editable:false},
{dataIndx:'something', maxWidth:150, editable:false}
],
numberCell: {show: false},
menuIcon: false,
scrollModel:{autoFit:true}, // show scroll
flex: {on:true}, // Width of headers auto fit
width: "100%",
height: "100%",
hoverMode: "row",
dragColumns: {enabled:false},
showTitle: false,
            showToolbar: false,
showTop: false,
wrap: true, // Cell content on one line
hwrap: false,
selectionModel: { type:"row", mode:"single", column:false, all:false}, // Select rows !!!!
virtualWin: true,
rowClick: function(event, ui) {
// Must be a data row
if(!empty(ui.rowData))
{
// It will be true, false or undefined
var checked = ui.rowData["state"];
// Edit the row and toggle the state (checkbox)
that.infoGrid.pqGrid("updateRow", {rowIndx:ui.rowIndx, newRow:{"state":!checked} });
}
},
check: function(event, ui) {
that.change_info_grid_checked();
},
groupModel: {
on: true,
header: false,
grandSummary: true,
agg: {
qty: 'sum'
}
},
summaryTitle:{ count: "{0}", sum: "{0}" ,avg:"{0}" }
});

14
I have 3 columns in a grid "time", "username" and "title":

Code: [Select]
colModel : [
{dataIndx:'time', maxWidth:48, title:lang.timeTxt, dataType:"date",
render:function(ui){
return {
text: moment(ui.cellData).format("LT"),
attr: 'title="'+moment(ui.cellData).format("LLL")+'"'
};
}
},
{dataIndx:'username', maxWidth:52, title:lang.userTxt, dataType:"stringi", filter:{crules:[{condition: 'contain'}], style:"text-align:"+dir},
render:function(ui){
return {
text: String(ui.cellData),
attr: 'title="'+String(ui.cellData).replace('"', '\"')+'"'
};
}
},
{dataIndx:'title', title:lang.descriptionTxt, dataType:"stringi", filter:{crules:[{condition: 'contain'}], style:"text-align:"+dir},
render:function(ui){
var txt = (empty(ui.rowData["qty"])?"":ui.rowData["qty"]+" x ") + ui.cellData + (empty(ui.rowData["barcode"]) ? "" : " ("+ui.rowData["barcode"]+")");
return {
text: txt,
attr: 'title="'+txt.replace('"', '\"')+'"'
};
}
}
]

I insert a new row with the following:
Code: [Select]
$grid.pqGrid("addRow", {newRow:rowData, rowIndx:0});
The issue is that the fields in rowData are being removed if the field is in the colModel.

Before:
Code: [Select]
{
barcode: "2616",
box: 0,
error: true,
id: 0,
qty: 0,
time: "2023-08-06 22:06:25",
title: "<a href='/modules/stock/equipment.php?asset=816' target='_blank'>Slick Litebox (2m, LX2000) (2616)</a> is damaged",
user_id: 1,
username: "User's name"
}

After (I added a console.log(ui.rowData) in the render and the rowInit to get the data):
Code: [Select]
{
barcode: "2616",
box: 0,
error: true,
id: 0,
pq_hideOld: undefined,
pq_render: 1,
pq_ri: 0,
pq_top: undefined,
qty: 0,
user_id: 1
}

As you can see all the data is there, but the fields that match a column in the colModel have been removed.  I can show you the console view to prove it.  I get exactly the same with addNodes.

However it does work if I add the parameter checkEditable:false in the "addRow" options.



15
ParamQuery Pro Evaluation Support / Grid auto width scroll bars
« on: April 22, 2023, 12:54:05 am »
I have set the following options:

   stripeRows: true, // Show stripes
      menuIcon: false,
      scrollModel:{autoFit:true},
      flex: { on: true },
      showTitle: false, // Hide table title
      wrap: false, // Cell content on one line
      hwrap: false, // header content on one line
      showTop: false, // Hide top  (including col move icons)
      selectionModel: { type:"row", mode:"single", column:false, all:false}, // Select rows
      wrap: false,

I also have some columns with min and max width set.  The issue is that due to the min and max width, when the grid is not wide enough to fit all the columns, there is no horizontal scroll bar, instead the far right columns are clipped off screen.  I need the flexible auto width to the screen, and when that is not possible (minimum width due to column width constraints), the horizontal scroll bar should appear instead of clipping the grid.

Also, when the data is empty, as in dataModel: {data: []}, how do I remove/hide or disable the "undefined" message?

Pages: [1]