Search code examples
javascriptangularjsangular-ui-grid

Angular UI-Grid Custom Filter Button


I have some data using Angular UI-Grid that I want to filter for a single column value using a single filter button.

The filter input works but the Filter Button does not work yet. Is it possible to pragmatically have a filter 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.filterText = 'Mixers';

  $scope.filterBtn = function() {
    $scope.gridApi.grid.columns[1].filters[0] = {
      condition: uiGridConstants.filter.EXACT,
      term: 'Mixers'
    };

    $scope.gridOptions.enableFiltering = true
    $scope.gridApi.grid.refresh(); 
  }

  $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' ].forEach(function( field ){
        if ( row.entity[field].match(matcher) ){
          match = true;
        }
      });
      if ( !match ){
        row.visible = false;
      }
    });
    return renderableRows;
  };
}]);

Solution

  • Ok I got it to work with both buttons:

    http://plnkr.co/edit/25r5aBC0wAtDTEE8gOcO?p=preview

    $scope.filterText = '';
    
      $scope.filterBtn = function() {
        $scope.filterText = 'Mixers';
        $scope.gridApi.grid.refresh(); 
      }
    
      $scope.filter = function() {
        $scope.filterText = $scope.filterValue;
        $scope.gridApi.grid.refresh();
      };