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.


Messages - jplevene

Pages: [1] 2 3
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 / Re: selectionModel - toggle - BUG
« on: March 17, 2024, 11:48:51 pm »
There is a hack, but it is not ideal as it fires off select change events when there shouldn't be any.  The hack is to add the following option:

Code: [Select]
rowClick: function(event, ui) {
var sel = $("#grid").pqGrid("SelectRow");
if( !sel.isSelected({rowIndx:ui.rowIndx }) )
sel.add({rowIndx:ui.rowIndx});
}

the "toggle" option in "selectionModel" when "false" should not toggle the row/cell selection when a selected row/cell is clicked

4
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


5
Help for ParamQuery Pro / Re: Spreadsheet column header cells with <select>
« on: February 26, 2024, 06:24:44 pm »
As an update and lack of response, for others who are wondering, the solution was after I imported the spreadsheet:

Code: [Select]
colModel = import_grid.pqGrid("getColModel");

$.each(colModel, function(i,v){
// Add an extra heading row
v.colModel = [{title:import_grid_column_title}];
});
import_grid.pqGrid("refreshCM");
import_grid.pqGrid("refreshHeader");


function setup_import_header_click_events()
{
// Unbind any old clicks
import_grid.find("div.pq-grid-header-table select.field_select").unbind("click");
// Stop propagation with clicks on the select
import_grid.find("div.pq-grid-header-table select.field_select").click(function(e){
e.stopPropagation();
return false;
});
}

and seeting the option:

   
Code: [Select]
refreshHeader: function(){ setup_import_header_click_events(); }
There is a bug I found.  When setting
Code: [Select]
columnTemplate and colModel: [{title:column_title_function}] with autoAddCol:true, when adding a new column, the new column header did not have the correct title and missed the column_title_function.

As a suggestion, it would be nice to also be able return a jQuery object in title, not just HTML which seems a bit antiquated.

6
Help for ParamQuery Pro / Re: Spreadsheet column header cells with <select>
« on: February 23, 2024, 10:23:50 pm »
The above does not work when loading a spreadsheet.  I used:

Code: [Select]
.pqGrid("importWb", { sheet:0, workbook:{sheets:[{}]}, extraRows: 20, extraCols: 10 })
I tried setting:

Code: [Select]
columnTemplate: {
title: function (ui) {
console.log(ui);
return "TEST - " + pq.toLetter(ui.colIndx);
}
},

pqGrid does not call the "title" function if an Excel spreadsheet is loaded for the columns in the spreadsheet, it is only triggers title when new columns are added after the spreadsheet has loaded, but never in the spreadsheet columns.

Also putting a <select> in the title when using "title", clicking it makes the drop down appear then instantly vanish on mouse up.

A "postRenderHead" would be the best option, which can also stop click propagation (what causes the select list to vanish)

7
Help for ParamQuery Pro / Re: Create an empty spreadsheet
« on: February 23, 2024, 10:11:57 pm »
I did it by:

Code: [Select]
$("#grid").pqGrid("importWb", { sheet:0, workbook:{sheets:[{}]}, extraRows: 10, extraCols: 10 })

8
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)

9
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"
            }
      });

10
Is there another way to select/deselect the check box with a row click without using "updateRow" that will still trigger the double click on a row event?

11
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.

12
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?

13
Help for ParamQuery Pro / Re: 9.1.1 tree lines wrong
« on: December 30, 2023, 02:42:40 am »
I have noticed one final issue with the tree lines, however I think it best to add an option to correct it due to a possible issue below:

If you look at the screenshot attached, some node/rows where the text wraps to the next line goes through the tree lines (this is from a mobile phone). 

The obvious fix is to indent the text, however if the indent is quite large from having lots of ancestors, you might only get space enough for a partial word (or just a letter) on each wrapped line.  The reason for optional is to overcome this and backwards compatibility.

A better option apart from a true or false would be an option to only indent line wraps if the gap is more than a certain width (it would default to null or something like that meaning never indent line wraps).  So if there is a level set at 75px and the gap is 100px, it would wrap text with the appropriate indent.  However if the gap is 50px (lower than 75px setting), it would wrap with no indent like it does at the moment. My point is that sometimes indenting the wrapped text might cause more issues due to limited space, thus it needs to be a conditional option.

14
Help for ParamQuery Pro / Re: v9.1.0 bug
« on: December 24, 2023, 05:48:49 am »
Mistake in my solution above, it should be:

Code: [Select]
var top = ri && this.topArr[ri] ? this.topArr[ri] : 0,
It is actually ri that is also undefined

15
Help for ParamQuery Pro / Re: TREE BUG 9.1.1 tree lines wrong
« on: December 23, 2023, 10:45:06 pm »
Thanks, I did see that but as the previous tree worked fine I didn't think it would be an issue.

There is still one more issue, in that the last item on the entire list (right down at the bottom), even though it is empty it gets an expand icon.

The "children" value is an empty array, when the field is removed it displays correctly. Is this the correct workflow?

Pages: [1] 2 3