Header cell color

[queensgambit9]

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.

[paramvir]

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


[queensgambit9]

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

[paramvir]

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.

[queensgambit9]

On export, I get:

Code: [Select]

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

[paramvir]

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

[queensgambit9]

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

[paramvir]

Adding this._trigger('refreshHeader') fixed it

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

[queensgambit9]

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

[paramvir]

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.

[queensgambit9]

Thanks.

[queensgambit9]

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

[queensgambit9]

Is there an updated code available to address this issue?

[paramvir]

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'
        }
    }
}