Server-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 'text' filter { field: 'country', filter: 'agTextColumnFilter' }, // 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.

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

  • The Athlete column has a 'text' filter defined using filter: 'agTextColumnFilter'.
  • The Year column has a 'number' filter defined using filter: 'agNumberColumnFilter'.
  • The medals columns have a 'number' filter defined using filter: 'agNumberColumnFilter' on the 'number' column type.
  • The server uses the metadata contained in the filterModel to filter the rows.
  • Open the browser's 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: function(params) { // simulating async delay setTimeout(function() { params.success(['Australia', 'China', 'Sweden']); }, 500); } } }

For more details on setting values, see Supplying Filter Values. Once you have supplied values to the Set Filter, they will not change unless you ask for them to be refreshed; see Refreshing Values for more information.

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

  • The Country and Sport columns have Set Filters defined using filter: 'agSetColumnFilter'.
  • Set Filter values are fetched asynchronously and supplied via the params.success(values) callback.
  • The filter for the Sport column only shows the values which are available for the selected countries. When the filter for the Country column is changed, the values for the Sport filter are updated.
  • The server uses the metadata contained in the filterModel to filter the rows.
  • Open the browser's dev console to view the filterModel supplied in the request to the datasource.

Next Up

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