ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: nsymons on April 21, 2020, 08:27:33 pm

Title: Filter Row resizing and grid shifting up on checkbox click.
Post by: nsymons on April 21, 2020, 08:27:33 pm: https://jsfiddle.net/3p20f5w8/

With 7.2 when a grid has a filter row setup to filter the columns and a column with checkboxes, whenever a checkbox is clicked the filter row resizes by upwards of 30px and this causes whole grid shifts up temporarily causing a poor user experience for users attempting to click multiple checkboxes in a row. If you remove the filtering row the grid does not shift.

Steps to reproduce:
1) Click any data row checkbox in Paid column on linked fiddle that is not a header/filter checkbox.
Title: Re: Filter Row resizing and grid shifting up on checkbox click.
Post by: paramvir on April 21, 2020, 09:15:33 pm: It can be fixed by adding option autoRowHead: false

https://jsfiddle.net/3gbfyqxt/
Title: Re: Filter Row resizing and grid shifting up on checkbox click.
Post by: nsymons on April 21, 2020, 10:56:58 pm: Thanks for the quick response. I was not aware of this option.
Title: Re: Filter Row resizing and grid shifting up on checkbox click.
Post by: nsymons on April 21, 2020, 11:16:09 pm: Now with this option specified. My filters are not completely displaying on any grid. See attachments.
Title: Re: Filter Row resizing and grid shifting up on checkbox click.
Post by: paramvir on April 22, 2020, 07:31:37 am: Please use rowHtHead option to adjust the height.

https://paramquery.com/pro/api#option-rowHtHead
Title: Re: Filter Row resizing and grid shifting up on checkbox click.
Post by: nsymons on April 22, 2020, 08:08:52 pm: rowHtHead is an integer only as per the API, when I assign the values of 1 and 2 the following occurs which does not improve the issue. As the number increases it just continues to grow. All of the column header titles are hidden, as the integer increases the bottom column header shows but the column grouping header continues to not show.

acl.obj = {
width: 'auto',
height: 'flex',
maxHeight: '100%',
rowHeight : '19',
hwrap: false,
numberCell: {show: false},
selectionModel: { type: 'null' },
autoRowHead: false,
rowHtHead: '0',
filterModel: { on: true, mode: "AND", header: true, menuIcon: false,
gridOptions: {
numberCell: { show: false },
flex: { on: true },
showHeader: false,
}
},
freezeCols: 3,
postRenderInterval: -1,
dataReady: function(event, ui){calculateSummary(this); },
change: function(event, ui){calculateSummary(this); },
columnTemplate: {hvalign: 'bottom'},
complete: function(event, ui){calculateSummary(this); },
editorEnd: function(event, ui){ sanitizeInputGrid(this, event, ui); },
colModel:[
{ dataIndx: 'cb', title: '', cb: {all: true, header: true, select: true, check: "true", uncheck: "false"}, type: 'checkbox',
editor: false, sortable: false, minWidth: 30, maxWidth:30, align: "center"},
{ title: "CP Number", dataType: "string", dataIndx:'cpNumber', nodrag: true, editable: false, minWidth: 110, maxWidth: 120,
filter: { crules: [{condition: 'begin'}], }},
{ title: "CP Name", dataType: "string", dataIndx:'cpName', nodrag: true, editable: false, minWidth: 385, maxWidth: 385,
filter: { crules: [{ condition: 'begin'}] }},
{ title: "Collateral", colModel:[
{ title: "Secured", dataType: "string", dataIndx:'colSecured', nodrag: true, editable: false, minWidth: 115, maxWidth: 160, align: "right",
sortType: sortNumbers,
filter: { crules: [{ condition: 'customFilter' }] },
render: function(ui){
return formatNumber(ui.rowData.colSecured);
}},
{ title: "Unsecured (GA+UCL)", dataType: "string", dataIndx:'colUnSecured', nodrag: true, editable: false, minWidth: 140, maxWidth: 140, align: "right",
sortType: sortNumbers,
filter: { crules: [{ condition: 'customFilter' }] },
render: function(ui){
return formatNumber(ui.rowData.colUnSecured);
}},
]},
Title: Re: Filter Row resizing and grid shifting up on checkbox click.
Post by: paramvir on April 22, 2020, 09:53:12 pm: You are not supposed to set it to '0' or 1 or 2.

As per the docs, rowHtHead is an integer whose default value is 25, so please set it around 30 to increase the height.

https://jsfiddle.net/7jr4Lte8/

Please share a jsfiddle if still facing issue.
Title: Re: Filter Row resizing and grid shifting up on checkbox click.
Post by: nsymons on April 22, 2020, 11:18:16 pm: https://jsfiddle.net/y1s35m2u/1/

Setting to anything above 25 does the following:
Title: Re: Filter Row resizing and grid shifting up on checkbox click.
Post by: paramvir on April 23, 2020, 08:45:57 am: rowHtHead data type is an integer which is a number and not a string.

So please enter 30 instead of '30'

https://jsfiddle.net/13v9L5to/
Title: Re: Filter Row resizing and grid shifting up on checkbox click.
Post by: nsymons on April 23, 2020, 07:22:53 pm: Changed. That fixes the filter row not properly displaying but causes an undesired effect of all title header rows being too tall with extra dead space (Just edit the integer to 40 on https://jsfiddle.net/13v9L5to/ to see the effect I am talking about). Is there not a fix to edit just the height of the filter row and not every row in the header to resolve the issue of the checkboxes and filter shift on click. Attached is a before the proposed fix with headers and filter row not showing and a after proposed fix with filter row showing but the header titles too large.
Title: Re: Filter Row resizing and grid shifting up on checkbox click.
Post by: paramvir on April 24, 2020, 03:21:15 pm: I'm afraid there is no other option currently to fulfill your requirement. I would look into it for upcoming versions.