CODEWITHSUNDEEP
angularjsfilteringangular-ui-grid
Kle
Kle

Reputation: 1043

How can I get changed filter text for each column in Angular ui grid?

I m using new angular uigrid. But I think documentation is really poor for searching. I did not find necessary infos for filtering. I will use server side filtering . SO I have to get changed filter text for each column. Please help me?

I tried this code. But probably it was for ng grid(old grid)

$scope.$watch('completedgridOptions.filterOptions.filterText', function (newVal, oldVal) {
            if (newVal !== oldVal) {
                console.log("Filter");
            }
        }, true);

Upvotes: 1

Views: 4740

Answers (3)

Dhana
Dhana

Reputation: 704

 $scope.gridOptions.data = $scope.data;//initialiazing grid with data
 $scope.gridApi.core.on.filterChanged($scope, function () {
       var grid = this.grid;
       //do your stuff here           
 });

Basically I was able to use the filterchanged feature on grid only after the grid gets initialized with data.

So put the snippet as suggested in the thread only after initializing grid with data.

I have used $timeout as below for my convinience.

$timeout(function () {
     $scope.getData();//get your data from ajax call or from where ever your data is
     $scope.assignDatatoGrid();//assign the data to grid or initialize the grid with data
     $scope.$apply();
     //this feature is available only after the grid gets populated with data
     $scope.gridApi.core.on.filterChanged( $scope, function() {
         var grid = this.grid;
     });
}, 2000);

It worked for me

Thank you

Upvotes: 1

bokkie
bokkie

Reputation: 1590

if you want to check what is what:

      $scope.gridApi.core.on.filterChanged($scope, function () {
             var grid = this.grid;
             $.each(grid.columns, function (index, column) {
                   switch (column.field) {
                        case 'externalIdentifier':
                             $scope.identifier = column.filters[0].term;
                             break;
                        case 'name':
                             $scope.name = column.filters[0].term;
                             break;
                        case 'status':
                             $scope.status = column.filters[0].term;
                             break;
                        ....
                        ....
                        ....
                   }
            });
            //you have to move it by hand, if you are on the third page and filter, it will stay on the third page, even though you will not have any data there
            grid.options.paginationCurrentPage = 1; 

            //use the timeout so that you don't get a db call at every key pressed                                
            if (angular.isDefined($scope.filterTimeout)) {
               $timeout.cancel($scope.filterTimeout);
            }
            $scope.filterTimeout = $timeout(function () {
                 getPage();  //this will call your data from the db
                 }, 500);
            });

     var getPage = function () {
           itemsPerPage = paginationOptions.pageSize;
           offset = (paginationOptions.pageNumber -1) * paginationOptions.pageSize;
           getDataByFilter($scope.name, $scope.identifier, $scope.status, offset, itemsPerPage)
}

Upvotes: 3

Rogério Limas
Rogério Limas

Reputation: 21

I am new using angular as well but try this:

$scope.gridApi.core.on.filterChanged($scope, function () {
   var grid = this.grid;
   for (var i = 0; i < objGrid.columns.length; i++) {
      term = objGrid.columns[i].filter.term;
      field = objGrid.columns[i].field;
      console.log('Field: ' + field + '\nSearch Term: ' + term);
   }
});

Upvotes: 2

Related Questions