ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: queensgambit9 on November 06, 2017, 06:41:01 pm

Title: Filter in use
Post by: queensgambit9 on November 06, 2017, 06:41:01 pm

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?

Title: Re: Filter in use
Post by: paramvir on November 07, 2017, 01:14:09 pm

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


Title: Re: Filter in use
Post by: queensgambit9 on November 08, 2017, 02:40:01 am

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...

Title: Re: Filter in use
Post by: paramvir on November 09, 2017, 10:28:35 pm

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