Angular UI Grid filter using a button

Question

Using Angular UI Grid http://ui-grid.info/docs/#/tutorial/321_singleFilter, I want to have a single button to filter "Company = Mixers" only. The filter works using the input but how do I apply a single filter to a button?

Plunker: http://plnkr.co/edit/R6PhMiBbaeqj9ErjdvY1?p=preview

HTML:

<div ng-controller="MainCtrl">

  <p><button ng-click='filterBtn()'>Filter for "Company = Mixers"</button></p>

  <p><input ng-model='filterValue'/><button ng-click='filter()'>Filter</button></p>

  <div id="grid1" ui-grid="gridOptions" class="grid"></div>

</div>

JS:

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  var today = new Date();
  $scope.gridOptions = {
    enableFiltering: false,
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
      $scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
    },
    columnDefs: [
      { field: 'name' },
      { field: 'company' }
    ]
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
  });

 $scope.filterBtn = function(val) {
   // filter for "Company = Mixers" only.
   $scope.gridApi.grid.dataSource.filter({
      field: "company",
      operator: "eq",
      value: "Mixers" //or val
    });
 };

  $scope.filter = function() {
    $scope.gridApi.grid.refresh();
  };

  $scope.singleFilter = function( renderableRows ){
    var matcher = new RegExp($scope.filterValue);
    renderableRows.forEach( function( row ) {
      var match = false;
      [ 'name', 'company', 'email' ].forEach(function( field ){
        if ( row.entity[field].match(matcher) ){
          match = true;
        }
      });
      if ( !match ){
        row.visible = false;
      }
    });
    return renderableRows;
  };
}]);

layonez layonez · Accepted Answer · 2016-05-17T19:14:27

What you need is add filter programmatically to grid:

$scope.filterBtn = function(val) {
     $scope.gridApi.grid.columns['Company'].filters[0] = {
                        term: 'mixers'
        };

  };

Here some related question

Angular UI Grid filter using a button

1 Answers