Floating Filters

Floating Filters are an additional row under the column headers where the user will be able to see and optionally edit the filters associated to each column.

Floating filters are activated by setting grid property floatingFilter=true:

gridOptions = { // turn on floating filters floatingFilter: true ... }

Floating filters depend on and coordinate with the main column filters. They do not contain their own state, rather they display the state of the main filter and if editable they set state on the main filter. For this reason, there is no API for getting or setting state of the floating filters.

Every floating filter takes a parameter to show/hide automatically a button that will open the main filter.

To see how floating filters work see Floating Filter Components.

The following example shows the following features of floating filters:

  • Text filter: Have out of the box read/write floating filters (Sport column)
  • Set filter: Have out of the box read floating filters (Country column)
  • Date and number filter: Have out of the box read/write floating filters for all filter except when switching to in range filtering, then the floating filter is read only (Age and date columns)
  • Columns with the applyButton require the user to press enter on the floating filter for the filter to take effect (Gold column)
  • Changes made directly to the main filter are reflected automatically in the floating filters (change any main filter)
  • Columns with custom filter have automatic read only filter if the custom filter implements the method getModelAsString. (Athlete column)
  • The user can configure when to show/hide the button that shows the rich filter (Silver and Bronze columns)
  • Columns with filter=false don't have floating filters (Total column)
  • Combining suppressMenu=true and filter=false lets you control where the user access to the rich filter. In this example suppressMenu=true for all the columns except Silver and Bronze

Provided Floating Filters

All the default filters provided by the grid provide their own implementation of a floating filter. All you need to do to enable these floating filters is set the floatingFilter=true grid property. The features of the provided floating filters are as follows:

Filter Editable Description
Text Sometimes Provides a text input field to display the filter value, or a read only label if read only.
Number Sometimes Provides a text input field to display the filter value, or a read only label if read only.
Date Sometimes Provides a Date input field to display the filter value, or a read only label if read only.
Set No Provides a read only label by concatenating all selected values.

The Text, Number and Date (the simple filters) have their floating filters editable sometimes. The floating filter is editable if the filter has one condition and one value. If the floating filter has a) two conditions or b) zero (custom option) or two ('In Range') values, then the floating filter is read only.

The screen shots below show example scenarios where the provided number floating filter is editable and read only.

  • One Value and One Condition - Editable
  • One Value and Two Conditions - Read Only
  • Two Values and One Condition - Read Only