Filter Row resizing and grid shifting up on checkbox click.

[nsymons]

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.

[paramvir]

It can be fixed by adding option autoRowHead: false

https://jsfiddle.net/3gbfyqxt/

[nsymons]

Thanks for the quick response. I was not aware of this option.

[nsymons]

Now with this option specified. My filters are not completely displaying on any grid. See attachments.

[paramvir]

Please use rowHtHead option to adjust the height.

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

[nsymons]

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

[paramvir]

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.

[nsymons]

https://jsfiddle.net/y1s35m2u/1/


Setting to anything above 25 does the following:

[paramvir]

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]

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.

[paramvir]

I'm afraid there is no other option currently to fulfill your requirement. I would look into it for upcoming versions.