The state of the Advanced Filter can be read as an Advanced Filter Model, and applied again later by setting that model back. This allows the filter to be saved and restored, for example across page reloads or between users, or to be set programmatically without typing an expression.
Advanced Filter Model Copy Link
The Advanced Filter model describes the current state of the Advanced Filter. This is represented by an AdvancedFilterModel, which is either a ColumnAdvancedFilterModel for a single condition, or a JoinAdvancedFilterModel for multiple conditions:
'join' |
How the conditions are joined together |
The filter conditions that are joined by the type |
For example, the following Advanced Filter would be represented by the following model:
([Age] > 23 OR [Sport] ends with "ing") AND [Country] is any of ["Australia", "Italy"]
const advancedFilterModel = {
filterType: 'join',
type: 'AND',
conditions: [
{
filterType: 'join',
type: 'OR',
conditions: [
{
filterType: 'number',
colId: 'age',
type: 'greaterThan',
filter: 23,
},
{
filterType: 'text',
colId: 'sport',
type: 'endsWith',
filter: 'ing',
}
]
},
{
filterType: 'set',
colId: 'country',
type: 'isAnyOf',
values: ['Australia', 'Italy'],
}
]
};A condition using a Custom Filter Option stores the option's displayKey in type.
Saving and Restoring the Advanced Filter Copy Link
The Advanced Filter Model can be retrieved via the API method getAdvancedFilterModel, and set via the API method setAdvancedFilterModel.
Get the state of the Advanced Filter. Used for saving Advanced Filter state |
Set the state of the Advanced Filter or used for restoring Advanced Filter state.
If inferring cell data types, and row data is initially empty or yet to be set, the filter model will be applied asynchronously after row data is added.
To always perform this synchronously, set cellDataType = false on the default column definition, or provide cell data types for every column. |
The Advanced Filter Model can be saved and restored as part of Grid State.
The Advanced Filter Model and API methods are demonstrated in the following example:
- Clicking
Save Advanced Filter Modelwill save the current Advanced Filter. - Clicking
Restore Saved Advanced Filter Modelwill restore the previously saved Advanced Filter. - Clicking
Set Custom Advanced Filter Modelwill set[Gold] >= 1. - Clicking
Clear Advanced Filterwill clear the current Advanced Filter.
import {
AdvancedFilterModel,
ClientSideRowModelModule,
GridApi,
GridOptions,
GridStateModule,
ModuleRegistry,
NumberFilterModule,
TextFilterModule,
createGrid,
enableDevValidations,
} from "ag-grid-community";
import {
AdvancedFilterModule,
ColumnMenuModule,
ContextMenuModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
TextFilterModule,
NumberFilterModule,
GridStateModule,
AdvancedFilterModule,
ClientSideRowModelModule,
ColumnMenuModule,
ContextMenuModule,
]);
const initialAdvancedFilterModel: AdvancedFilterModel = {
filterType: "join",
type: "AND",
conditions: [
{
filterType: "join",
type: "OR",
conditions: [
{
filterType: "number",
colId: "age",
type: "greaterThan",
filter: 23,
},
{
filterType: "text",
colId: "sport",
type: "endsWith",
filter: "ing",
},
],
},
{
filterType: "text",
colId: "country",
type: "contains",
filter: "united",
},
],
};
let gridApi: GridApi<IOlympicData>;
const gridOptions: GridOptions<IOlympicData> = {
columnDefs: [
{ field: "athlete" },
{ field: "country" },
{ field: "sport" },
{ field: "age", minWidth: 100 },
{ field: "gold", minWidth: 100 },
{ field: "silver", minWidth: 100 },
{ field: "bronze", minWidth: 100 },
],
defaultColDef: {
flex: 1,
minWidth: 180,
filter: true,
},
enableAdvancedFilter: true,
initialState: {
filter: {
advancedFilterModel: initialAdvancedFilterModel,
},
},
};
let savedFilterModel: AdvancedFilterModel | null = null;
function saveFilterModel() {
savedFilterModel = gridApi!.getAdvancedFilterModel();
}
function restoreFilterModel() {
gridApi!.setAdvancedFilterModel(savedFilterModel);
}
function restoreFromHardCoded() {
gridApi!.setAdvancedFilterModel({
filterType: "number",
colId: "gold",
type: "greaterThanOrEqual",
filter: 1,
});
}
function clearFilter() {
gridApi!.setAdvancedFilterModel(null);
}
const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((response) => response.json())
.then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).saveFilterModel = saveFilterModel;
(<any>window).restoreFilterModel = restoreFilterModel;
(<any>window).restoreFromHardCoded = restoreFromHardCoded;
(<any>window).clearFilter = clearFilter;
}
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
.button-group {
padding-bottom: 1rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 13px;
}
<div class="example-wrapper">
<div>
<div class="button-group">
<button onclick="saveFilterModel()">Save Advanced Filter Model</button>
<button onclick="restoreFilterModel()">Restore Saved Advanced Filter Model</button>
<button onclick="restoreFromHardCoded()" title="[Gold] >= 1">Set Custom Advanced Filter Model</button>
<button onclick="clearFilter()">Clear Advanced Filter</button>
</div>
</div>
<div id="myGrid"></div>
</div>
export interface IOlympicData {
athlete: string,
age: number,
country: string,
year: number,
date: string,
sport: string,
gold: number,
silver: number,
bronze: number,
total: number
}