This section describes how the Set Filter can be controlled programmatically using API calls.
Set Filter Model Copy Link
Get and set the state of the Set Filter by getting and setting the model on the grid API.
// get filter model
const model = api.getColumnFilterModel('country');
// set filter model and update
await api.setColumnFilterModel('country', { values: ['Spain', 'Ireland', 'South Africa'] });
// refresh rows based on the filter (not automatic to allow for batching multiple filters)
api.onFilterChanged();
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.
Properties available on the SetFilterModel interface.
'set' |
SetFilterModelValue |
Set Filter API Copy Link
The Set Filter values can be updated via the Set Filter Handler:
// get filter handler
const countryFilterHandler = this.gridApi.getColumnFilterHandler('country');The SetFilterHandler interface defines the public API for the Set Filter Handler.
Properties available on the SetFilterHandler<TValue = string> interface.
Returns the full list of unique keys used by the Set Filter. |
Returns the full list of unique values used by the Set Filter. |
Sets the values used in the Set Filter on the fly. |
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.
|
Resets the Set Filter to use values from the grid, rather than any values that have been provided directly.
|
The Mini Filter get by interacted with via the Set Filter instance:
// get filter instance
this.gridApi.getColumnFilterInstance('country').then(countryFilterComponent => {
// use set filter instance
});The SetFilterUi interface defines the public API for the Set Filter component.
Properties available on the SetFilterUi interface.
Returns the current mini-filter text. |
Sets the text in the Mini Filter at the top of the filter (the 'quick search' in the popup). |
In the example below, you can see how the filter for the Athlete column is modified through the API.
Enabling Case-Sensitivity Copy Link
By default the API is case-insensitive. You can enable case sensitivity by using the caseSensitive: true filter parameter:
<ag-grid-angular
[columnDefs]="columnDefs"
/* other grid options ... */ />
this.columnDefs = [
{
field: 'colour',
filter: 'agSetColumnFilter',
filterParams: {
caseSensitive: true
}
}
];The caseSensitive option also affects Mini-Filter searches and the values presented in the Filter List.
The following example demonstrates the difference in behaviour between caseSensitive: false (the default) and caseSensitive: true:
- With
caseSensitive: false(the default):setModel()will perform case-insensitive matching against available values to decide what is enabled in the Filter List.setFilterValues()will override the available values and force the case of the presented values in the Filter List to those provided.- Selected values will be maintained based upon case-insensitive matching.
- With
caseSensitive: true:setModel()will perform case-sensitive matching against available values to decide what is enabled in the Filter List.setFilterValues()will override the available values and force the case of the presented values in the Filter List to those provided.- Selected values will be maintained based upon case-sensitive matching.
- In both cases
getModel()andgetFilterValues()will return the values with casing that matches those displayed in the Filter List. This is printed to the developer console.
Next Up Copy Link
Continue to the next section to learn about Multi Filters.