---
product: "AG Grid"
title: "Advanced Filter - Filter Model / API"
description: "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."
enterprise: true
framework: javascript
version: "36.2.0"
related:
    - title: "Columns & Filter Options"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-advanced-columns/"
    - title: "Input & Builder"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-advanced-input-builder/"
    - title: "Custom Filter Options"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-advanced-custom-filter-options/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Advanced Filter - Filter Model / API

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

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:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `filterType` | `'join'` |  |  |  |
| `type` | `'AND' \| 'OR'` |  |  |  |
| `conditions` | `AdvancedFilterModel[]` |  |  |  |

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"]`

```js
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](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-advanced-custom-filter-options/#filter-model) stores the option's `displayKey` in `type`.

## Saving and Restoring the Advanced Filter

The Advanced Filter Model can be retrieved via the API method `getAdvancedFilterModel`, and set via the API method `setAdvancedFilterModel`.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getAdvancedFilterModel` | `Function` |  |  |  |
| `setAdvancedFilterModel` | `Function` |  |  |  |

> **Note**
>
> The Advanced Filter Model can be saved and restored as part of [Grid State](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/grid-state/).

The Advanced Filter Model and API methods are demonstrated in the following example:

- Clicking `Save Advanced Filter Model` will save the current Advanced Filter.
- Clicking `Restore Saved Advanced Filter Model` will restore the previously saved Advanced Filter.
- Clicking `Set Custom Advanced Filter Model` will set `[Gold] >= 1`.
- Clicking `Clear Advanced Filter` will clear the current Advanced Filter.

#### Advanced Filter Model / API

```ts
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;
}
```

[Live example: Advanced Filter Model / API](https://www.ag-grid.com/archive/36.2.0/examples/filter-advanced-api/advanced-filter-model-api/typescript/)