Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Angular Data Grid: Set Filter - API

This section describes how the Set Filter can be controlled programmatically using API calls.

Set Filter Model

Get and set the state of the Set Filter by getting and setting the model on the filter instance.

// get filter instance
const countryFilterComponent = this.gridApi.getFilterInstance('country'); 

// get filter model
const model = countryFilterComponent.getModel(); 

// set filter model and update
countryFilterComponent.setModel({ values: ['Spain', 'Ireland', 'South Africa'] });

// refresh rows based on the filter (not automatic to allow for batching multiple filters)

The filter model contains an array of string values where each item in the array corresponds to an element to be selected from the set.

Set Filter API

The Set Filter has the following API:

Returns true if the filter is currently active, otherwise false.
function isFilterActive(): boolean;
Returns a model representing the current state of the filter, or null if the filter is not active.
function getModel(): object;
Sets the state of the filter using the supplied model. Providing null as the model will de-activate the filter.

Note: if you are providing values asynchronously to the Set Filter, you need to wait for these changes to be applied before performing any further actions by waiting on the returned grid promise, e.g. filter.setModel({ values: ['a', 'b'] }).then(function() { gridApi.onFilterChanged(); });
function setModel(model: object | null): void;
Returns the full list of unique values used by the Set Filter.
Sets the text in the Mini Filter at the top of the filter (the 'quick search' in the popup).
Gets the Mini Filter text.
Refreshes the values shown in the filter from the original source. For example, if a callback was provided, the callback will be executed again and the filter will refresh using the values returned. See Refreshing Values.
Sets the values used in the Set Filter on the fly.
Resets the Set Filter to use values from the grid, rather than any values that have been provided directly.

It is important to note that when updating the Set Filter through the API, it is up to the developer to call filterInstance.applyModel() to apply the changes that have been made to the model and then gridOptions.api.onFilterChanged() at the end of the interaction with the filter.

If no call is made to filterInstance.applyModel() then the filter UI will show any changes, but they won't be reflected in the filter model. This will appear as if the user never hit the Apply Button (regardless of whether the Apply Button is active or not).

If no call to gridOptions.api.onFilterChanged() is provided the grid will still show the data relevant to the filter before it was updated through the API.

In the example below, you can see how the filter for the Athlete column is modified through the API and how at the end of the interaction a call to gridOptions.api.onFilterChanged() is performed.