I am using ui-grid: 4.0.6 and using external filtering; i have used pagination with server side filtering and taking all the values from server side response.

I have a scenario where i need to hit the predefined filters for the grid loading on the next page; the data is coming correctly as expected but i am unable to let the grid know that the filtering of data is done; the filter value for the column doesn't select.

How can we alter it programmatically:

Here is the code :

Initialize grid:

$scope.gridOptions = {
                enableSelectAll: false,
                enableRowSelection: false,
                enableRowHeaderSelection: false,
                exporterCsvFilename: fileNm,
                exporterMenuPdf: false,
                enableFiltering: true,
                showGridFooter: true,
                paginationPageSizes: [25, 50, 75],
                paginationPageSize: 25,
                useExternalPagination: true,
                enableGridMenu: true

Column Definition:

var sparableColumn = {
                name: 'sparable', displayName: 'Sparable', headerCellClass: $scope.highlightFilteredHeader,
                /* Multi select dropdown type filtering
                filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><div my-custom-modal></div></div>', 
                */

                filter: {
                    type: uiGridConstants.filter.SELECT,
                    selectOptions: $scope.sparableFilter
                },

                cellTemplate: '<div ng-if="row.entity.sparable" class="tcenter">{{row.entity.sparable}}</div><div ng-if="!row.entity.sparable"></div>',
                cellClass: function (grid, row, col) {
                    if (grid.getCellValue(row, col) === 'NO') {
                        return 'red tcenter';
                    }
                    if (grid.getCellValue(row, col) === 'YES') {
                        return 'green tcenter';
                    }
                    return 'tcenter';
                }
            };
            var consumableColumn = {
                name: 'consumable', displayName: 'Consumable', headerCellClass: $scope.highlightFilteredHeader,
                filter: {
                    type: uiGridConstants.filter.SELECT,
                    selectOptions: $scope.consumableFilter
                },
                cellTemplate: '<div ng-if="row.entity.consumable" class="tcenter">{{row.entity.consumable}}</div><div ng-if="!row.entity.consumable"></div>',
                cellClass: function (grid, row, col) {
                    if (grid.getCellValue(row, col) === 'NO') {
                        return 'red tcenter';
                    }
                    if (grid.getCellValue(row, col) === 'YES') {
                        return 'green tcenter';
                    }
                    return 'tcenter';
                }
            };

Filtering:

$scope.gridApi.core.on.filterChanged($scope, function () {
                        var grid = this.grid;
                        $scope.serversideFilters = [];
                        angular.forEach(grid.columns, function (value, key) {
                            if (value.filters[0].term) {
                                var dummy = {};
                                console.log('FILTER TERM FOR ' + value.colDef.name + ' = ' + value.filters[0].term);
                                dummy['k'] = value.colDef.name;
                                dummy['v'] = value.filters[0].term;
                                $scope.serversideFilters.push(dummy);
                            }
                        });
                        getPage();
                    });