Highlight filtered Column on Datatables

Webix JS
1

Hi,

I am looking how can I highlight a column which is filtered. I try to use the event onBeforeFilter to get the columns which have filter but without success. There is any built functionality for this ?

Thanks

2

There’s no built-in solution. But as I understand the use-case, it’s not a complex task:

  • onBeforeFilter will work only for the client-side filtering. (an example is provided below);
  • onAfterFilter doesn’t store any parameters (column ID or a filter value), but it’s possible to iterate through the columns manually:

http://webix.com/snippet/714280c2

Also please note that the datatable can have only one kind of filters (client/server) at a time. I.e. if at least one column has the serverFilter, the rest will act as server filters, too.

3

Yeah should say that I use serverSide

The solution in snippet can make the Datatable very slow for 1 thousand rows and 30 columns as an example.

What can be good would be to add in

 <div column="1" class="webix_column " style="width: 80px; left: 50px;">

a class example col-marked { background:yellow } and this will color all the column yellow

4

As a solution to apply directly a css on a column could be something like this

 gride.achColumn(function(column){
if (this.getFilter(column) && this.getFilter(column).value){        
       var id = this.getColumnIndex(column);
       $('#' + grid_id).find('.webix_column[column='+id+']').css({'background': 'yellow'});
   }

});

5

You can add a css through the column’s configuration:

grid.getColumnConfig(column).css = "col-marked";

But such solution requires refreshColumns() to apply the CSS. Therefore, the focus in text filters will be lost.

Here’s a draft of such method: https://webix.com/snippet/a5edd54b

6

Listopad there is an option to refresh only one column or refresh only the footer ?

7

I have a datatable with 42 columns and 100.000 rows and refreshColumns() has performance affect

8

Another option is to gather the IDs of filtered columns and set the comparison using the cssFormat for each column that has a filter:

https://webix.com/snippet/7c120970