How to ensure the sort and filter icons are shown in an ag-grid on initial load with filtered and sorted data?

Question

I've got an application that persists that sorting and filtering criteria for an ag-grid control. We're using server-side sorting and filtering so once the sort/filter criteria have been loaded the grid data is then loaded using those criteria.

When the grid first loads the row data displayed is correct based on the sort and filter data that was persisted. However, there's no indication in the grid (either the sort or filter icons) that the sort/filter is in place. How can I ensure these are displayed when the data is first loaded?

I've tried using the gridOptions.api.setFilterModel() method but if I call this before the data is loaded I get an exception. If I call it directly after the data has been loaded the method causes the data to be reloaded and thus enters an infinite loop.

I have been able to set the "sort" property on the columnDef when initialising the grid but haven't been able to do this with the filter data.

Note that we're also using an Angular 2 filter component (implementing AgFilterComponent) so have a "filterFramework" property set in the columnDef.

Cheers, Stuart.

Answer 1

We do the same and on my side I call the method setFilterActive at startup to init correctly the status of each filter icon.

Here is an example on how to do it

gridOptions.isExternalFilterPresent = () => {
    let isFilterActive = myExternalFiler.ColumnFilters.length > 0
    if (isFilterActive) {
        //used at init time to show the filter icon correctly
        for (let colFilter of myExternalFiler.ColumnFilters) {
        if (!gridOptions.columnApi.getColumn(colFilter.ColumnId).isFilterActive()) {
            gridOptions.columnApi.getColumn(colFilter.ColumnId).setFilterActive(true)
        }
        }
    }         
    return isFilterActive;
}