ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: queensgambit9 on October 01, 2025, 07:34:08 pm

Title: Header cell color
Post by: queensgambit9 on October 01, 2025, 07:34:08 pm

Would it be possible to set a specific background-color on a column header cell if a column has a filter applied?
Purpose would be to quickly see what columns that has filter applied.

Title: Re: Header cell color
Post by: paramvir on October 02, 2025, 11:57:43 am

Use columnTemplate and the filter event to apply conditional styles to header cells based on active filters. The example below highlights a header in red when its filter has a value.

styleHead Getter: Dynamically calculates the style. It checks if a filter rule with a value exists and returns a background color.

filter Event: After filtering, it refreshes each header cell individually. Using refreshHeaderCell prevents the loss of focus in the filter input fields, which a full refreshHeader would cause.

Code: [Select]

columnTemplate: {
get styleHead(){
let val = this.filter?.crules?.[0].value;
if(val != null && val.length ){
return {
'background-color': 'red'
}
}
}
},
filter(){
this.colModel.forEach((col, ci)=>{
this.refreshHeaderCell({
rowIndx: 0,
colIndx: ci
})
})
},


Title: Re: Header cell color
Post by: queensgambit9 on October 02, 2025, 09:15:12 pm

Thanks.
Seems when then filter is removed it keeps the modified color and do not resume to "standard" color.

using:

Code: [Select]

columnTemplate: { width: 115, dataType: 'string', filter: { crules: [{ condition: 'contain' }], selectGridObj: remoteOptions('a.table') },
get styleHead(){
let val = this.filter?.crules?.[0].value;
if(val != null && val.length ){
return {
'color': 'blue'
}
} 
}
},
filter(){
this.colModel.forEach((col, ci)=>{
this.refreshHeaderCell({
rowIndx: 0,
colIndx: ci
})
})
},

Title: Re: Header cell color
Post by: paramvir on October 03, 2025, 06:28:26 pm

Yes, sometimes it was failing as the filter event is not fired if the filtered data in the grid is not changed.

I've changed it to beforeFilter event and updated this example:

https://paramquery.com/pro/demos/filter_initial

Please let me know if you still face any issues.

Title: Re: Header cell color
Post by: queensgambit9 on October 06, 2025, 02:20:34 pm

On export, I get:

Code: [Select]

pqgrid.min.js:9 Uncaught invalid color: red

Title: Re: Header cell color
Post by: paramvir on October 06, 2025, 02:39:11 pm

Use hexa notation "#ff0000" instead of color names: red

Title: Re: Header cell color
Post by: queensgambit9 on October 06, 2025, 05:40:38 pm

Works. Other issue seems to be that the sorting of a column is lost when the code is executed.

Title: Re: Header cell color
Post by: paramvir on October 07, 2025, 10:44:13 am

Adding this._trigger('refreshHeader') fixed it

https://paramquery.com/pro/demos/filter_initial

Title: Re: Header cell color
Post by: queensgambit9 on October 09, 2025, 01:43:24 pm

Thanks. How do you remove formatting when exporting to excel? (using paramquery-10.1.0)?

Title: Re: Header cell color
Post by: paramvir on October 09, 2025, 07:47:04 pm

There are 2 ways:

1) Use eachCellHead callback parameter in https://paramquery.com/pro/api#method-exportData

var data = grid.exportData({ format: 'xlsx',  eachCellHead: function(cell){
  cell.css = ""; //clear the css for each header cell.
}});

2) use a global variable skipFilterHeaderStyle, toggle it to true before exporting data
and in get styleHead() don't return anything if skipFilterHeaderStyle is set to true.

Title: Re: Header cell color
Post by: queensgambit9 on October 13, 2025, 12:54:26 am

Thanks.

Title: Re: Header cell color
Post by: queensgambit9 on October 17, 2025, 05:33:18 pm

Seems when the filter condition is "In between" and the "to" field is set, the color is not applied to the column header.

Title: Re: Header cell color
Post by: queensgambit9 on October 20, 2025, 01:53:45 pm

Is there an updated code available to address this issue?

Title: Re: Header cell color
Post by: paramvir on October 20, 2025, 06:58:59 pm

Yes please use value2 to check 2nd value of the between condition.

Code: [Select]

get styleHead() {
    let crule = this.filter?.crules?.[0],
        val = crule?.value,
        val2 = crule?.value2; //2nd value for between condition.

    if ((val != null && (!$.isArray(val) || val.length)) || (val2 != null)) {
        return {
            'background-color': 'lightyellow'
        }
    }
}