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