Vue Data GridSSRM Filtering

This section covers Filtering using the Server-Side Row Model (SSRM).

Enabling Filtering

Filtering is enabled in the grid via the filter column definition attribute.

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

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.

Server-side 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:

• 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.

Set Filtering

Filtering using the Set Filter has a few differences to filtering with Simple Filters.

Set Filter Model

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
}

Set Filter Values

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-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

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:

• 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 Country column is using complex objects. The country name is shown in the Filter List, but the filterModel (and request) use the country code.
• 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.

Advanced Filter

In addition to Column Filters, the Advanced Filter can also be used with the Server-Side Row Model. In this case, the filterModel in the request will be an Advanced Filter Model of type AdvancedFilterModel | null.

Note that Cell Data Types must be supplied in order for the Advanced Filter to display the correct filter options, otherwise only 'text' options will be displayed.

Next Up

Continue to the next section to learn about SSRM Row Grouping.