I post this with a link to this previous post Swap Server + Filtering + Sorting for an ng-grid using WebAPI , hoping to finally come up with a simple but working example of using an ng-grid with external data sources. Until this moment, I managed to implement external paging and sorting, but I ran into a filtering problem.
It looks like the filterText property of the ng-grid filter options is not bound to the view. When I print something in the text of the ng-grid filter, my $ watch-ed function is not called, and therefore I have no way to request the filtered data on the server. However, the same watch-expressions work fine when used, for example. for swapping or sorting.
Rummaging around a bit, I found this https://github.com/angular-ui/ng-grid/pull/456 post about an error in this area, but it is unclear if this is still an open problem. Can anyone help? Here is the relevant piece of JS code:
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(); }]);