CODEWITHSUNDEEP
angularjsfilteringangular-ui-grid
laurenOlga
laurenOlga

Reputation: 731

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

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.

Upvotes: 9

Views: 15556

Answers (4)

user6158393
user6158393

Reputation: 1

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

Upvotes: 0

Dobi
Dobi

Reputation: 31

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

Upvotes: 3

hic1086
hic1086

Reputation: 755

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

Upvotes: 18

hic1086
hic1086

Reputation: 755

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

Upvotes: 5

Related Questions