This section covers Filtering using the Server-Side Row Model (SSRM).
Filtering is enabled in the grid via the filter
column definition attribute.
<ag-grid-angular
[columnDefs]="columnDefs"
/* other grid options ... */>
</ag-grid-angular>
this.columnDefs = [
// sets the 'text' filter
{ field: 'country', filter: 'agTextColumnFilter' },
// use the default 'set' filter
{ field: 'year', filter: true },
// no filter (unspecified)
{ field: 'sport' },
];
For more details on filtering configurations see the section on Column Filtering.
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.
The request object sent to the server contains filter metadata in the filterModel
property, an example is shown below:
// Example request with filter info
{
filterModel: {
athlete: {
filterType: 'text',
type: 'contains',
filter: 'fred'
},
year: {
filterType: 'number',
type: 'greaterThan',
filter: 2005,
filterTo: null
}
},
// other properties
}
Notice in the snippet above the filterModel
object contains a 'text'
and 'number'
filter. This filter metadata is used by the server to perform the filtering.
For more details on properties and values used in these filters see the sections on Text Filter Model and Number Filter Model.
The example below demonstrates filtering using Simple Column Filters, note the following:
'text'
filter defined using filter: 'agTextColumnFilter'
.'number'
filter defined using filter: 'agNumberColumnFilter'
.'number'
filter defined using filter: 'agNumberColumnFilter'
on the 'number'
column type.filterModel
to filter the rows.filterModel
supplied in the request to the datasource.Filtering using the Set Filter has a few differences to filtering with Simple Filters.
Entries in the filterModel
have a different format to the Simple Filters. This filter model is what gets passed as part of the request to the server when using Server-side Filtering. The following shows an example of a Set Filter where two items are selected:
// IServerSideGetRowsRequest
{
filterModel: {
country: {
filterType: 'set',
values: ['Australia', 'Belgium']
}
},
// other properties
}
When using the Set Filter with the SSRM 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:
<ag-grid-angular
[columnDefs]="columnDefs"
/* other grid options ... */>
</ag-grid-angular>
this.columnDefs = [
// 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, 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. Note the following:
filter: 'agSetColumnFilter'
.params.success(values)
callback.filterModel
(and request) use the country code.When the filter for the Country column is changed, the values for the Sport filter are updated.
filterModel
to filter the rows.filterModel
supplied in the request to the datasource.Continue to the next section to learn about SSRM Row Grouping.