Style glyph icon when filter is applied

Style glyph icon when filter is applied

Posted by: paulr on 5 February 2021, 5:37 pm EST

• 

  paulr

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 February 2021, 5:37 pm EST - Updated 3 October 2022, 2:34 pm EST

  Hi guys,

  I would like to style the filter glyph icon with a different color whenever filter is applied on a column. I figured out that I can change css (like below) but it will apply the color regardless of whether the filter is applied for a specific columns and I only want to apply the color to the filtered columns.

  .wj-glyph-filter {
      cursor: pointer;
      color: #FF8754;
      margin: 3px;
  }
  

  

• 

  paulr

  • Post Options:
  • Link
    Copy

  Posted 5 February 2021, 5:40 pm EST

  It looks like I accidentally created three identical forum posts. Please delete 2 of the 3 - I’m not able to delete them.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 8 February 2021, 4:30 am EST

  Hi Paul,

  FlexgridFilter adds .wj-filter-on and .wj-filter-off classes on the grid’s cells based on whether the filter is applied or not. You may target these classes to apply styles based on whether the filter is applied or not. You may refer to the following code sippet and the sample demonstrating the same:

  .wj-cell.wj-filter-on .wj-glyph-filter {
    cursor: pointer;
    color: #ff8754;
    margin: 3px;
  }
  

  https://codesandbox.io/s/wijmo-starter-forked-5c6qr?file=/src/styles.css

  ~sharad