ng-grid external filtering: $watch not working

[Naftis]

Hi, I'm starting with AngularJS so probably I'm missing something obvious, but I cannot manage to have external filtering work in my ng-grid (http://angular-ui.github.io/ng-grid/) usage sample. On the server side I have an MVC webapi application exposing some fake data via a RESTful GET. On the client side, I can see data and page through them (with server-side paging), but when I type something in the filter's text of the ng-grid my $watch-ed function does not get called, and thus I have no chance to request filtered data to the server. Yet, the same watch expressions work fine when used e.g. for paging or sorting. What I'm doing wrong?

Here is the relevant JS code snippet:

var app = angular.module('MyApp', ['ngGrid']);

app.controller('MainController', ['$scope', '$http', function ($scope, $http) {

    $scope.items = [];

    $scope.filterOptions = {

        filterText: "",

        useExternalFilter: true

    };

    $scope.totalServerItems = 0;

    $scope.pagingOptions = {

        pageSizes: [25, 50, 100],

        pageSize: 25,

        currentPage: 1

    };

    $scope.sortOptions = {

    // omitted for brevity...

    };

    

    $scope.gridOptions = {

        data: "items",

        columnDefs: [

            { field: "id", displayName: "ID", width: "60" },

            { field: "name", displayName: "Name", pinnable: true },

            { field: "age", displayName: "Age", width: "60" },

            { field: "isFemale", displayName: "F", width: "40" }

        ],

        enablePaging: true,

        enablePinning: true,

        pagingOptions: $scope.pagingOptions,        

        filterOptions: $scope.filterOptions,

        keepLastSelected: true,

        multiSelect: false,

        showColumnMenu: true,

        showFilter: true,

        showGroupPanel: true,

        showFooter: true,

        sortInfo: $scope.sortOptions,

        totalServerItems: "totalServerItems",

        useExternalSorting: true,

        i18n: "en"

    };

    $scope.refresh = function() {

        setTimeout(function () {

            // call the server and get data into $scope.items...

        }, 100);

    };

    // this WORKS    

    $scope.$watch('pagingOptions', function (newVal, oldVal) {

        if (newVal !== oldVal) {

            $scope.refresh();

        }

    }, true);

    // this DOES NOT WORK: the function never gets called

    $scope.$watch('filterOptions', function (newVal, oldVal) {

        if (newVal !== oldVal) {

            $scope.refresh();

        }

    }, true);

    // this WORKS

    $scope.$watch('sortOptions', function (newVal, oldVal) {

        if (newVal !== oldVal) {

            $scope.refresh();

        }

    }, true);

    $scope.refresh();

}]);

[Jason Wicker]

I had the same problem. Looks like the value isn't updated the way it should be.

I resolved this by accessing the filterText directly:

 $scope.$watch('gridOptions.$gridScope.filterText', function (newVal, oldVal) {
                console.log('Filtering!');
                if (newVal !== oldVal) {
                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.gridOptions.$gridScope.filterText);
                }
            }, true);

[Fakhruddin Ali Ahmad]

if you can see

 $scope.filterOptions = {

        filterText: "",

        useExternalFilter: true

    }

You have not provided the search text box detail, it should be like this

filterOptions: {

    filterText: '',

    externalFilter: 'searchText',

    useExternalFilter: true

  }

For more detail see "

ng-grid search sort paging with AngularJs WebAP and MVC ASP.Net