external filter in ng-grid

Question

I have 3 search fields that should filter my table (name, target, reach).
The first 2 creating regular filter, meaning on change of one of them the "filterText" property is changed in this structure:

name: [NAME_VALUE]; target: [TARGET_VALUE];

The problem is with the last one. I want it to filter by lower-then or higher-then.

Something like this:

name: [NAME_VALUE]; target: [TARGET_VALUE]; reach: >[REACH_VALUE]

So I figured out that I'm supposed to create my custom filtering function and set "useExternalFilter" to true.

I've searched for 2 days for this and haven't found the full answer: How can I get a reference to the rows for filter them? And when I get this reference, how can i set row do be hidden using the ng-grid way?

This is what I did until now: I saw in ng-grid's source code that they emit the "ngGridEventFilter" event on the change of "filterText" so I listened to it using this:

$scope.$on( "ngGridEventFilter", function(){
    $scope.checkReach( );
});

Answer 1

You are overriding the grids internal filter logic and you have to handle it yourself, server side.

<input type="text" ng-model="filterOptions.filterText" placeholder="Filter">


app.controller('MyCtrl', function($scope) {
    $scope.filterOptions = {
        filterText: "",
        useExternalFilter: true
    };

    $scope.gridOptions = {
        data: 'myData',
        filterOptions: $scope.filterOptions
    };

    $scope.$watch('filterOptions', function () {
      //Call an async function to fetch data here.
      someAsyncFunction($scope.filterOptions.filterText);
    }, true); 
});