I'm working on an AngularJS project using the UI Grid module. I would like to have row filtering available as an option, but not a lot of users need it and the filter boxes take up a lot of space so I want to start with the filtering option disabled and have a button to enable it as needed. So I set enableFiltering: false and added in a button that runs $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;, but clicking it didn't seem to do anything. After some more testing, I found that if I started with enableFiltering: true, clicking the button still wouldn't do anything immediately, but if I clicked it and then tried to type in one of the filter boxes, they would disappear as soon as I started typing (but still would not reappear even if I clicked the button again).
Any idea for how I can get this working properly? I already tried $scope.$apply(), but that only gave me "Error: [$rootScope:inprog] $apply already in progress." Plunker here: http://plnkr.co/edit/L5bgA4XukmYJaVQHVkgR
Here is what you want I guess: http://plnkr.co/edit/Qyts0zQrltx4QxlOWgob?p=preview
Inspired by this example from ui-grip website: http://ui-grid.info/docs/#/tutorial/103_filtering
angular.module('app',['ui.grid']).controller('Ctrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants){
$scope.toggle = function(){
$scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
}
$scope.gridOptions = {
data: [{name:'Bob',age:20},{name:'Joe',age:21}],
enableFiltering: true,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
},
}
}]);