JavaScript Data GridAdvanced Filter - Input & Builder

Version 36.2.0

Enterprise

This section describes the grid options that configure the Advanced Filter input, where it is displayed, and the Advanced Filter Builder.

Advanced Filter Input Copy Link

The buttons shown in the Advanced Filter input and the element it is displayed in can both be configured.

Buttons Copy Link

It is possible to customise the buttons displayed in the Advanced Filter, allowing for the use of other Filter Buttons such as Reset, Cancel and Clear. Configure via the grid option advancedFilterParams which follows the IAdvancedFilterParams interface:

FilterAction[]

default: ['apply']

Specifies the buttons to be shown in the Advanced Filter, in the order they should be displayed in. The options are:

'apply': The Apply button will apply the filter.

'clear': The Clear button will clear the filter input without removing the current active filter.

'reset': The Reset button will clear the filter and apply an empty filter.

'cancel': The Cancel button will discard any changes that have been made to the filter in the UI, restoring the applied model.

boolean

default: false

Whether to hide the Builder button to open the Advanced Filter Builder

The following example demonstrates configuring the Advanced Filter:

The Builder button has been removed via suppressBuilderButton. The Builder can still be opened via the API.
The buttons have been configured to add the Clear and Reset buttons.

main.ts

import {
  AdvancedFilterModel,
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  GridStateModule,
  IAdvancedFilterParams,
  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",
    },
  ],
};

const advancedFilterParams: IAdvancedFilterParams = {
  buttons: ["clear", "apply", "reset"],
  suppressBuilderButton: true,
};

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,
    },
  },
  advancedFilterParams: advancedFilterParams,
};

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));

index.html

<div id="myGrid" style="height: 100%"></div>

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Filter Parent Copy Link

By default the Advanced Filter is displayed underneath the Column Headers. To display the Advanced Filter outside of the grid (such as above it), set the grid option advancedFilterParent. The Popup Parent must also be set to an element that contains both the Advanced Filter parent and the grid.

HTMLElement | null

DOM element to use as the parent for the Advanced Filter to allow it to appear outside of the grid. Set to null or undefined to appear inside the grid.

AdvancedFilterModule

The following example demonstrates displaying the Advanced Filter outside of the grid:

The Advanced Filter parent is set using an element directly above the grid.
Popup Parent is set to the document body.

main.ts

import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  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,
  AdvancedFilterModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

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,
  popupParent: document.body,
  onGridReady: (params: GridReadyEvent) => {
    // could also be provided via grid option `advancedFilterParent`
    params.api.setGridOption(
      "advancedFilterParent",
      document.getElementById("advancedFilterParent"),
    );
  },
};

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));

styles.css

.example-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-left: 5px;
}

#myGrid {
    flex: 1 1 0px;
    width: 100%;
}

.example-header {
    margin-bottom: 10px;
}

index.html

<div id="wrapper" class="example-wrapper">
    <div id="advancedFilterParent" class="example-header"></div>
    <div id="myGrid"></div>
</div>

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Advanced Filter Builder Copy Link

The Advanced Filter Builder can be configured via the grid option advancedFilterBuilderParams which follows the IAdvancedFilterBuilderParams interface:

number

default: 120

Width in pixels of the Advanced Filter Builder add button select popup.

FilterAction[]

default: ['apply', 'cancel']

Specifies the buttons to be shown in the Advanced Filter Builder, in the order they should be displayed in. The options are:

'apply': The Apply button will apply the filter and close the builder.

'clear': The Clear button will clear the filter in the builder without removing the current active filter.

'reset': The Reset button will clear the filter and apply an empty filter.

'cancel': The Cancel button will discard any changes that have been made to the filter in the UI, and close the Builder without applying any changes.

number

default: 500

Minimum width in pixels of the Advanced Filter Builder popup.

number

Max width in pixels of the Advanced Filter Builder pill select popup. Unset, the popup grows to its widest option, bounded by the width of the Advanced Filter Builder.

number

default: 140

Min width in pixels of the Advanced Filter Builder pill select popup.

boolean

default: false

Whether to show the move up and move down buttons in the Advanced Filter Builder.

boolean

default: false

Whether to hide the Full Screen button in the Advanced Filter Builder.

Launch via API Copy Link

As well as using the button in the Advanced Filter, it's possible to launch the Advanced Filter Builder via the showAdvancedFilterBuilder grid API method, and hide it via hideAdvancedFilterBuilder:

Function

Open the Advanced Filter Builder dialog (if enabled).

AdvancedFilterModule

Function

Closes the Advanced Filter Builder dialog (if enabled). Un-applied changes are discarded.

AdvancedFilterModule

Events Copy Link

When the Advanced Filter Builder is shown or hidden, the advancedFilterBuilderVisibleChanged event is fired:

AdvancedFilterBuilderVisibleChangedEvent

Advanced Filter Builder visibility has changed (opened or closed).

The following example demonstrates configuring the Advanced Filter Builder:

The Advanced Filter Builder button displays the Advanced Filter Builder via the API method showAdvancedFilterBuilder.
The advancedFilterBuilderVisibleChanged event is used to toggle the disabled status of the Advanced Filter Builder button.
The showMoveButtons param is set in the advancedFilterBuilderParams, which displays buttons allowing the filter rows to be moved up and down (including via keyboard navigation).

main.ts

import {
  AdvancedFilterBuilderVisibleChangedEvent,
  AdvancedFilterModel,
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  GridStateModule,
  IAdvancedFilterBuilderParams,
  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",
    },
  ],
};

const advancedFilterBuilderParams: IAdvancedFilterBuilderParams = {
  showMoveButtons: true,
  suppressFullScreenButton: true,
  buttons: ["clear", "apply", "cancel"],
};

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,
  popupParent: document.getElementById("wrapper"),
  initialState: {
    filter: {
      advancedFilterModel: initialAdvancedFilterModel,
    },
  },
  advancedFilterBuilderParams: advancedFilterBuilderParams,
  onAdvancedFilterBuilderVisibleChanged: onAdvancedFilterBuilderVisibleChanged,
  onGridReady: (params: GridReadyEvent) => {
    // An external parent hides the input in the grid, so the filter is edited only via the Builder.
    params.api.setGridOption(
      "advancedFilterParent",
      document.getElementById("advancedFilterParent"),
    );
  },
  onFilterChanged: onFilterChanged,
};

function onAdvancedFilterBuilderVisibleChanged(
  event: AdvancedFilterBuilderVisibleChangedEvent<IOlympicData>,
) {
  const eButton = document.getElementById("advancedFilterBuilderButton")!;
  if (event.visible) {
    eButton.setAttribute("disabled", "");
  } else {
    eButton.removeAttribute("disabled");
  }
}

function onFilterChanged() {
  const advancedFilterApplied = !!gridApi!.getAdvancedFilterModel();
  document
    .getElementById("advancedFilterIcon")!
    .classList.toggle("filter-icon-disabled", !advancedFilterApplied);
}

function showBuilder() {
  gridApi!.showAdvancedFilterBuilder();
}

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).showBuilder = showBuilder;
}

styles.css

.example-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#myGrid {
    flex: 1 1 0px;
    width: 100%;
}

.example-header {
    margin-bottom: 10px;
}

.parent {
    display: none;
}

.filter-icon {
    margin-left: 4px;
    opacity: 0.6;
}

.filter-icon-disabled {
    display: none;
}

index.html

<div id="wrapper" class="example-wrapper">
    <div class="example-header">
        <div id="advancedFilterParent" class="parent"></div>
        <button id="advancedFilterBuilderButton" onclick="showBuilder()">Advanced Filter Builder</button>
        <i id="advancedFilterIcon" class="fa fa-filter filter-icon"></i>
    </div>
    <div id="myGrid"></div>
</div>

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Localisation Copy Link

If providing custom Localisation values for the Advanced Filter, note that if the filter option values contain spaces, one option value cannot start with another option value.

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

JavaScript Data GridAdvanced Filter - Input & Builder

Advanced Filter Input Copy Link

Buttons Copy Link

Filter Parent Copy Link

Advanced Filter Builder Copy Link

Launch via API Copy Link

Events Copy Link

Localisation Copy Link