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 {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
AdvancedFilterModel,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
GridState,
GridStateModule,
ModuleRegistry,
NumberFilterModule,
TextFilterModule,
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 savedFilterModel: AdvancedFilterModel | null = null;
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="example-wrapper">
<div>
<div class="button-group">
<button v-on:click="saveFilterModel()">Save Advanced Filter Model</button>
<button v-on:click="restoreFilterModel()">Restore Saved Advanced Filter Model</button>
<button v-on:click="restoreFromHardCoded()" title="[Gold] >= 1">Set Custom Advanced Filter Model</button>
<button v-on:click="clearFilter()">Clear Advanced Filter</button>
</div>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:enableAdvancedFilter="true"
:initialState="initialState"
:rowData="rowData"></ag-grid-vue>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "athlete" },
{ field: "country" },
{ field: "sport" },
{ field: "age", minWidth: 100 },
{ field: "gold", minWidth: 100 },
{ field: "silver", minWidth: 100 },
{ field: "bronze", minWidth: 100 },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 180,
filter: true,
});
const initialState = ref<GridState>({
filter: {
advancedFilterModel: initialAdvancedFilterModel,
},
});
const rowData = ref<IOlympicData[]>(null);
function saveFilterModel() {
savedFilterModel = gridApi.value!.getAdvancedFilterModel();
}
function restoreFilterModel() {
gridApi.value!.setAdvancedFilterModel(savedFilterModel);
}
function restoreFromHardCoded() {
gridApi.value!.setAdvancedFilterModel({
filterType: "number",
colId: "gold",
type: "greaterThanOrEqual",
filter: 1,
});
}
function clearFilter() {
gridApi.value!.setAdvancedFilterModel(null);
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
const updateData = (data) => (rowData.value = data);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return {
gridApi,
columnDefs,
defaultColDef,
initialState,
rowData,
onGridReady,
saveFilterModel,
restoreFilterModel,
restoreFromHardCoded,
clearFilter,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.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;
}