Angular UI-Grid: How to Clear All (general Angular and built-in UI-Grid) Column Filters On Button Click

Question

How do I clear AND refresh ALL of my (general Angular and built-in UI-Grid) filters on a button click?

Background: I have built an application that uses the UI-Grid and takes advantage of the built-in filtering functionality. It also has a cross-column search written in angular.

Current Battle I want to be able to clear and refresh my filters on a single button click. So far I have been able to implement this for the cross-column search but have not been successful implementing it for the built-in column filters (which ironically I thought would be the easy part!).

Research Done On Problem:

1) Searched through the UI-Grid tutorials ... fail

2) Looked at the provided UI-Grid API ...partial success! Seems like I think I found what I'm looking for in the "clearAllFilters" function (here is the source code) but I cannot figure out how to implement it so onto step 3...

3) Googled like mad for implementation demos/examples/help/hints/anything!? ...fail

4) Asked for help on Stack Overflow :)

Thanks in advance.

Answer 1

Sorry, I didn't see the clearAllFilters() function of ui grid. So it becomes simpler. You can do this:

  $scope.clearFilters = function() {
            $scope.myGridApi.grid.clearAllFilters();
        };

Answer 2

Please try this:

$scope.gridApi.core.clearAllFilters();

The $scope.gridApi was from the initial setting of my ui-grid element

 $scope.gridOptions = {
        flatEntityAccess: true,
        paginationPageSizes: [10, 25, 50, 75, 100],
        paginationPageSize: 25,
        enableFiltering: true,
        enableColumnResizing: true,
        enableGridMenu: true,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
        },
        columnDefs: [{