Sever-side Filtering

This section covers Server-side Filtering using the Server-side Row Model.

Enabling Filtering

Filtering is enabled in the grid via the filter column definition attribute. Some example column definitions with filtering enabled are shown below:

gridOptions: { columnDefs: [ // sets the 'number' filter {field: "country", filter: "agNumberColumnFilter"}, // use the default 'set' filter {field: "year", filter: true}, // no filter (unspecified) {field: "sport"} ], // other options }

For more details on filtering configurations see the section on Column Filtering.

Filtering on the Server

The actual filtering of rows is performed on the server when using the Server-side Row Model. When a filter is applied in the grid a request is made for more rows via getRows(params) on the Server-side Datasource. The supplied params includes a request containing filter metadata contained in the filterModel property.

An example of the contents contained in the filterModel is shown below:

// IServerSideGetRowsRequest { filterModel: { athlete: { filterType: "text", type: "contains", filter: "fred" }, year: { filterType: "number", type: "greaterThan", filter: 2005, filterTo: null } }, // other properties }

Notice in the snippet above that the filterModel object contains a 'text' and 'number' filter. This filter metadata can be used by the server to perform the actual filtering.

For more details on properties and values used in these filters see the section on Simple Column Filters.

Example: Simple Column Filters

The example below demonstrates server-side filtering using Simple Column Filters. Notice the following:

  • Athlete column has a 'text' filter defined using: filter: "agTextColumnFilter".
  • Year column has a 'number' filter defined using: filter: "agNumberColumnFilter".
  • The server uses the metadata contained in the filterModel to filter the rows.
  • Open the browsers dev console to view the filterModel supplied in the request to the datasource.

Filtering with the Set Filter

The Set Filter is the default filter used if filter: true entries in the filterModel have a different format to the Simple Column Filters.

An example of the contents contained in the filterModel for the Set Filter is shown below:

// IServerSideGetRowsRequest { filterModel: { country: { filterType: "set", values: ["Australia", "Belgium"] } }, // other properties }

The snippet above shows the filterModel for a single column with a Set Filter where two items are selected.

When using the Server-side Row Model it is necessary to supply the values as the grid does not have all rows loaded. This can be done either synchronously or asynchronously using the values filter param as shown below:

// colDef with Set Filter values supplied synchronously { field: 'country', filter: 'agSetColumnFilter', filterParams: { values: ['Australia', 'China', 'Sweden'] } } // colDef with Set Filter values supplied asynchronously { field: 'country', filter: 'agSetColumnFilter', filterParams: { values: (params) => { // simulating async delay setTimeout(() => { params.success(['Australia', 'China', 'Sweden']) }, 500); } } }

For more details on setting values refer to the Set Filter documentation.

Example: Set Filter

The example below demonstrates server-side filtering using the Set Filter. Notice the following:

  • Country column has a Set Filter defined using: filter: "agSetColumnFilter".
  • Set Filter values are fetched asynchronously and supplied via the params.success(values) callback.
  • The server uses the metadata contained in the filterModel to filter the rows.
  • Open the browsers dev console to view the filterModel supplied in the request to the datasource.
true, 'extras' => ['alasql']]) ?>

Next Up

Continue to the next section to learn about Server-side Row Grouping.