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.

Adkison

Any chance you can reset variables the grid is bound to in the controller to their default value? – Gelinas

@Gelinas - Yes, what I want to do is reset the variables the column filters are bound to - what you suggest is in line with how I am resetting my angular cross-column search and it's perfect for that but the ui-grid filters are set and maintained within the ui-grid js code and that is what I am having trouble accessing/resetting. – Adkison

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();
        };

Gulden

@techprat it was a while ago and I don't have access to the code anymore (previous employment) so while this did work I can't remember the details of what I ended up modifying. Looking in the api doc I see the function clearAllFilters takes up to three arguments and if you look at the code you can see that depending on what behavior you want you may have to set these parameters to get expected results. So short answer is yes - but you may have to play with the parameters to get the functionality you want. – Adkison

Answer 2

you can do this:

//get the grid api

$scope.myGridOptions.onRegisterApi = function(gridApi) {
  $scope.myGridApi=gridApi;
}

You have to bind this function to your clear button :

        $scope.clearFilters = function() {
            var columns = $scope.myGridApi.grid.columns;
                for (var i = 0; i < columns.length; i++) {
                    if (columns[i].enableFiltering) {
                        columns[i].filters[0].term='';
                    }
                }
            };

Gulden

How do you capture the event? – Flofloat

but this will not clear the values selected on custom filter. Anyways this gets an upvote for best answer for this question on this thread. – Circum

adding columns[i].filters[0].listTerm=''; solved my problem of clearing selected filters as well. – Circum

Thank you for posting this @laurenOlga. I am wrestling with the same beast as the new dev on the block, working with a very service, component and template heavy, rich application so it's a bit daunting. While I have not made significant progress yet, I just wanted to take some time to thank you for a very well thought-out and readable question! – Grimsby

Answer 3

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: [{

Relent

@ArepalliPraveenkumar: try the solution below by hic. it works :) – Circum

Answer 4

I think this is the simple way(just replacing the grid data with original/actual json data), you can simply create and call below clearFilters function on click of a button.

$scope.clearFilters = function() {
        $scope.yourGridOptions.data = $scope.originalData;
    }

Postmortem