Author Topic: Filter Row resizing and grid shifting up on checkbox click.  (Read 4281 times)

nsymons

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 10
    • View Profile
Filter Row resizing and grid shifting up on checkbox click.
« 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.
« Last Edit: April 21, 2020, 08:37:47 pm by nsymons »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6155
    • View Profile
Re: Filter Row resizing and grid shifting up on checkbox click.
« Reply #1 on: April 21, 2020, 09:15:33 pm »
It can be fixed by adding option autoRowHead: false

https://jsfiddle.net/3gbfyqxt/

nsymons

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: Filter Row resizing and grid shifting up on checkbox click.
« Reply #2 on: April 21, 2020, 10:56:58 pm »
Thanks for the quick response. I was not aware of this option.

nsymons

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: Filter Row resizing and grid shifting up on checkbox click.
« Reply #3 on: April 21, 2020, 11:16:09 pm »
Now with this option specified. My filters are not completely displaying on any grid. See attachments.


paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6155
    • View Profile
Re: Filter Row resizing and grid shifting up on checkbox click.
« Reply #4 on: April 22, 2020, 07:31:37 am »
Please use rowHtHead option to adjust the height.

https://paramquery.com/pro/api#option-rowHtHead

nsymons

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: Filter Row resizing and grid shifting up on checkbox click.
« Reply #5 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);
            }}, 
        ]},
« Last Edit: April 22, 2020, 08:40:05 pm by nsymons »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6155
    • View Profile
Re: Filter Row resizing and grid shifting up on checkbox click.
« Reply #6 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.
« Last Edit: April 22, 2020, 09:54:45 pm by paramvir »

nsymons

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: Filter Row resizing and grid shifting up on checkbox click.
« Reply #7 on: April 22, 2020, 11:18:16 pm »
https://jsfiddle.net/y1s35m2u/1/


Setting to anything above 25 does the following:
« Last Edit: April 22, 2020, 11:33:40 pm by nsymons »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6155
    • View Profile
Re: Filter Row resizing and grid shifting up on checkbox click.
« Reply #8 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/

nsymons

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 10
    • View Profile
Re: Filter Row resizing and grid shifting up on checkbox click.
« Reply #9 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.

« Last Edit: April 23, 2020, 07:34:26 pm by nsymons »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6155
    • View Profile
Re: Filter Row resizing and grid shifting up on checkbox click.
« Reply #10 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.