server side filtering with UI grid

Question

There is a default filtering provided by ui grid whcih is enabled using enableFiltering: false in gridOptions. Instead of using this default filtering i was the use the text entered in the filter box for multiple columns, send the filters to the serevr and get the data back. I have tried using filterOptions but $scope.$watch('filterOptions', function (newVal, oldVal) {

        if (newVal !== oldVal) {
            $scope.getPagedDataAsync($scope.gridOptions.$gridScope.filterText);
        }
    }, true);

never gets invoked. any help is appreciated.

score 0 · Accepted Answer · answered Apr 19 '16 at 18:51

There are a couple of different ways you can do this. In the onRegisterApi in the grid options you can do this:

  onRegisterApi: function(gridApi) {

         gridApi.core.on.filterChanged($scope,
              function(rowEntity, colDef, newValue, oldValue) {
             // check which filter value changed and do something
             // to get the value from a filter in column X you can do 
                  gridApi.grid.columns[X].filters[0]
              }
         );
  }

You may also set a filter object on each cell. Perhaps collect the various columns you wish to filter on and put a filter object on each of those cells. Whenever one changes you would have all the values you need and you can create a function in the "condition" that is called to do the fltering.

   filter: { type: xxx, condition: $scope.myCustomFilter }

   $scope.myCustomFilter = function(searchTerm, callValue) {

       // check your various conditions here and return true/false
   }

server side filtering with UI grid

1 Answers1