FlexGridFilter — Replace Status column filter UI with two radio buttons

FlexGridFilter — Replace Status column filter UI with two radio buttons

Posted by: nilesh_nichal on 19 February 2026, 9:39 am EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 19 February 2026, 9:39 am EST - Updated 19 February 2026, 9:44 am EST

  Hi Team,
  
  We’re using Wijmo FlexGrid with Angular 17 (Wijmo 5.20242.21).
  
  For the Status column, the data has only two possible values (e.g., boolean enabled: true/false or strings Enabled/Disabled). Instead of the default filter UI with a value list + search (see attached screenshot), we want the column filter popup to show two radio buttons:

  ( ) Enabled
  
  ( ) Disabled

  When the user selects a radio option, the filter should update immediately (or on Apply, depending on feasibility). We also need a Clear action to remove the filter.

  Recommended approach

  What is the recommended way to replace the column filter editor for a specific column with a custom UI (two radio buttons) in Angular?
  
  Is there a supported API using FlexGridFilter + custom FilterFactory / custom ColumnFilterEditor, or a way to provide a template for the filter popup of one column?

  Implementation details we’re aiming for

  Works whether the field is boolean (true/false) or string (‘Enabled’/‘Disabled’).
  
  Selecting Enabled should apply (item) => item.enabled === true (or ‘Enabled’).
  
  Selecting Disabled should apply (item) => item.enabled === false (or ‘Disabled’).
  
  Clear resets the column filter.
  
  The chosen option should reflect the current filter state when reopening the popup.
  
  Keyboard/ARIA accessible (arrow keys/space to change, Esc to close).

  APIs to use

  Sample request

  Could you share a StackBlitz (Angular 17, Wijmo 5.20242.21) showing:

  A FlexGrid with a Status column (boolean or string).
  
  wjFlexGridFilter enabled.
  
  A custom filter UI for the Status column using two radio buttons inside the column filter popup (replacing the default checklist/search).
  
  Programmatic wiring to ColumnFilter so that choosing a radio option updates the filter, and Clear removes it.
  
  Rest of the columns use the default filter UI.

  Environment

  Wijmo: 5.20242.21
  
  Angular: 17

  Thanks!

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 20 February 2026, 6:32 am EST

  Hi Nilesh,
  
  There is no direct option available in the API to make this type of modification in the Flexgrid filter dropdown. However, you can handle the ‘filterChanging’ event of the filter and customize the dropdown content as per your needs. Please refer to the following sample demonstrating the same - https://stackblitz.com/edit/angular-qspc7nyi?file=src%2Fapp%2Fapp.component.ts
  
  In the above sample, we have hidden the default content of the filter dropdown in the boolean columns and inserted a custom template as you described. You can try the same on your end.
  
  In case, you face any issues, please let us know.
  
  Regards