Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.ag-grid.com/javascript-data-grid/component-floating-filter/ below:

JavaScript Grid: Floating Filter Component

Floating Filter Components allow you to add your own floating filter types to AG Grid. You can create a Custom Floating Filter Component to work alongside one of the grid's Provided Filters, or alongside a Custom Filter.

In the following example you can see how the Gold, Silver, Bronze and Total columns have a custom floating filter NumberFloatingFilter. This filter substitutes the standard floating filter for an input box that the user can change to adjust how many medals of each column to filter by based on a greater than filter.

To configure custom floating filters, first enable the grid option enableFilterHandlers.

If you do not enable the grid option enableFilterHandlers, it is still possible to use custom floating filters, however this is not recommended. See Legacy Floating Filter Component.

The interface for a custom floating filter component is as follows:

interface FloatingFilterDisplayComp {
    

    
    getGui(): HTMLElement;

    
    refresh(params: FloatingFilterDisplayParams): void;

    

    
    
    init(params: FloatingFilterDisplayParams): void;

    
    
    
    afterGuiAttached(params?: IAfterGuiAttachedParams): void;

    
    
    
    
    destroy(): void;
}

The init(params) / refresh(params) methods take a params object with the items listed below. If custom params are provided via the colDef.floatingFilterComponentParams property, these will be additionally added to the params object, overriding items of the same name if a name clash exists.

Properties available on the FloatingFilterDisplayParams<TData = any, TContext = any, TModel = any, TCustomParams = object> interface.

TCustomParams

The params object passed to the filter. This is to allow the floating filter access to the configuration of the parent filter. For example, the provided filters use debounceMs from the parent filter params.

TModel | null

The current applied filter model for the column.

Function

Callback that should be called every time the model in the component changes. additionalEventAttributes If provided, will be passed to the filter changed event

Function

Callback that can be optionally called every time the floating filter UI changes. The grid will respond with emitting a FloatingFilterUiChangedEvent. Apart from emitting the event, the grid takes no further action. The callback takes one optional parameter which, if included, will get merged to the FloatingFilterUiChangedEvent object.

Function

Get the filter handler instance. If using a SimpleColumnFilter, the handler is is a wrapper object containing the provided doesFilterPass callback.

'init' | 'ui' | 'filter' | 'api' | 'colDef' | 'dataChanged'

'init' | 'ui' | 'filter' | 'api' | 'colDef' | 'dataChanged'

The column this filter is for.

Function

Shows the parent filter popup.

The grid api.

Application context as set on gridOptions.context.

This example extends the previous example by also providing its own custom filter NumberFilter in the Gold, Silver, Bronze and Total columns.

If you want to provide a custom filter but don't want to provide an equivalent custom floating filter, you can implement getModelAsString() on the filter handler and you will get a read-only floating filter for free.

This example uses the previous custom filter but implements getModelAsString(). Note how there are no custom floating filters and yet each column using NumberFilter (Gold, Silver, Bronze and Total) has a read-only floating filter that gets updated as you change the values from the main filter.

Continue to the next section to learn about Advanced Filters.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4