Angular ui-grid Set Filter at Runtime

Question

I'm having trouble setting a column filter at runtime via user interaction. Here's my attempt:

http://plnkr.co/edit/Ynesaq5o3HNsF5r8rXQf?p=preview

$scope.setFilter = function() {
    $scope.gridApi.grid.columns[1].filters[0] = {
      condition: uiGridConstants.filter.EXACT,
      placeholder: '',
      term: 'female'
    };

    $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
    $scope.gridApi.grid.refresh();
}

The field is set and the term is added to the field but the data is not refreshed.

Any ideas?

vdiaz1130 vdiaz1130 · Accepted Answer · 2016-02-19T21:25:55

In the original plunker I had a useExternalFiltering set to true. Removing that fixed the issue I was having.

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridConstants', function ($scope, $http, $interval, uiGridConstants) {
  $scope.filterText = 'female';
  $scope.gridOptions = {
    enableFiltering: false,

    columnDefs: [
      { name: 'name', enableFiltering: false },
      { name: 'gender' },
      { name: 'company', enableFiltering: false}
    ],
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
    }
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
  .success(function(data) {
    $scope.gridOptions.data = data;
  });

  $scope.setFilter = function() {
    console.log($scope.gridApi.grid.columns[1]);
    $scope.gridApi.grid.columns[1].filters[0] = {
      condition: uiGridConstants.filter.STARTS_WITH,
      term: $scope.filterText
    };

    $scope.gridOptions.enableFiltering = true
    $scope.gridApi.grid.refresh(); 
  }

}]);

Angular ui-grid Set Filter at Runtime

1 Answers