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

9
votes

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.

4
angularjsfilteringangular-ui-grid
Any chance you can reset variables the grid is bound to in the controller to their default value? – Matt
@Matt - 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. – laurenOlga

4 Answers

18
votes

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

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='';
                    }
                }
            };
3
votes

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

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