angularjs - Server-side filtering with ng-grid: binding issue? -
i'm posting reference previous post server-side paging+filtering+sorting ng-grid webapi, hoping able come simple, yet working sample of using ng-grid external data sources. point, i've managed implement external paging , sorting, i'm facing issue filtering.
it seems filtertext property of ng-grid filter options not bound view. when type in filter's text of ng-grid $watch-ed function not called, , have no chance request filtered data server. yet, same watch expressions work fine when used e.g. paging or sorting.
by digging around bit, found post https://github.com/angular-ui/ng-grid/pull/456 bug right in area, it's not clear if still open issue. help? here 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 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 server , data $scope.items... }, 100); }; // works $scope.$watch('pagingoptions', function (newval, oldval) { if (newval !== oldval) { $scope.refresh(); } }, true); // not work: function never gets called $scope.$watch('filteroptions', function (newval, oldval) { if (newval !== oldval) { $scope.refresh(); } }, true); // works $scope.$watch('sortoptions', function (newval, oldval) { if (newval !== oldval) { $scope.refresh(); } }, true); $scope.refresh(); }]);
this might bit late better late never :)
i had success directly binding filtertext property of gridoptions below
$scope.$watch('gridoptions.$gridscope.filtertext', function (newval, oldval) { if (newval !== oldval) { } }, true);
Comments
Post a Comment