Filter in use

[queensgambit9]

I would like to execute some css modifications on column title cell when filter is in use for that column...how can I do this?

[paramvir]

filter event can be used to add/remove css class to the filtered columns.

Code: [Select]

filter: function(evt, ui){
var grid = this;
this.getColModel().forEach(function(column){
var cls = (column.filter && column.filter.value !=null)? "red": "";
var $cell = grid.getCellHeader({dataIndx: column.dataIndx});
$cell[cls? 'addClass':'removeClass']("red");
column.cls = cls;

});
},


Add css rules to that class.

Code: [Select]

.pq-grid-col.red{
color: red;
}


[queensgambit9]

Thanks, seems though like:

Code: [Select]

var cls = (column.filter && column.filter.value != null)? "red": "";
will trigger on multiselect filters even though no filters are set...

[paramvir]

This function seems bit lengthy but it does the job.

Code: [Select]

function hightlightFilters(){
var grid = this;
grid.getColModel().forEach(function(column){
var filter = column.filter, add = false;
if(filter){
var condition = filter.condition,
        value = filter.value,
        value2 = filter.value2;

if(condition == "range"){
if(value.length) add = true;
}
else if(condition == "between"){
if (value!=null || value2 != null) add = true;
}
else if(value != null){
add = true;
}
}

var $cell = grid.getCellHeader({dataIndx: column.dataIndx});
$cell[add? 'addClass':'removeClass']("red");
column.cls = add? "red": "";
});
}


call the above function from beforeFilter event.

Code: [Select]

beforeFilter: function(evt, ui){
setTimeout( hightlightFilters.bind(this) );
},