CSS hook for column header cell that contains a filter button

CSS hook for column header cell that contains a filter button

Posted by: joe.huang on 29 July 2018, 11:39 pm EST

• 

  joe.huang

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 July 2018, 11:39 pm EST

  I’m trying to apply CSS properties to only column headers that contains a filter button, but couldn’t find any CSS classes to hook onto.

  I know there is a class called ‘wj-filter-off’ and ‘wj-filter-on’ applied when a filter is set on a column, however, even when setting a flexGrid column filter to type 0 (no filter), there is still a class ‘wj-filter-off’ applied.

  It would be nice if the ‘wj-filter-*’ classes disappears completely when column filter is type 0, or if there was such a class as ‘wj-header-filter-available’ or ‘wj-header-has-filter’ on the ‘wj-header’ element to help. If you know of any workarounds in CSS, that would be great.

  Thanks,
  
  Joe

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 30 July 2018, 11:32 pm EST

  Hi,
  
  If we understand then you are trying to remove the filter from some of the grid columns and apply some styling to those columnHeader cells which contain the filter.

  If that is the case then you set filterColumns property to an array of column bindings(columns that have filters). This way remaining column header won’t have wj-filter-off or wj-filter-on classes appended.
  
  Please refer to the following code snippet:-

   
  let filter=new wijmo.grid.filter.FlexGridFilter(grid);
  filter.filterColumns=["country","checked"];
  
   
  

  You may also refer to the following sample:-
  
  https://stackblitz.com/edit/js-upbskj?file=index.js

  ~Manish