ui-grid enableFiltering events

Question

I'm newish to Angular and to ui-grid, but I'm using it for a project and I'm quite impressed. I have a question about whether a given functionality exists. I've turned on row filtering with the "enableFiltering" gridOption and the filtering works great. Because I have so many columns and not all get displayed at once, I would like to be able to display a header above the grid showing stringified versions of all filters currently in effect. I believe that would require something like listening for events when a filter setting is changed (and then some API to get the current filter states)? But looking around, I do not see any events that seem to correspond to row filtering (I do see events for row selection, by comparison).

Am I missing some hooks for this sort of functionality? if so, could someone please point me in its general direction? or is that functionality that does not currently exist in ui-grid (I'm suspecting that is the case).

Thanks for any assistance

I would like to recommend you to check Tubular Grids (github.com/unosquare/tubular), you can access to the columns filter directly in the grid scope. — Geo Perez

c0bra c0bra · Accepted Answer · 2015-04-29T15:42:19

I don't believe there's currently an event that fires when filters have changed, but you shouldn't need that.

As an example, you could insert the grid columns into your controller's scope and show a list of columns with their filters with ng-repeats.

Here's how you'd get the grid into your scope using onRegisterApi:

$scope.gridOptions = {
  enableFiltering: true,
  columnDefs: [
    { name: 'name' },
    { name: 'amount', cellFilter: 'fractionFilter' }
  ],
  onRegisterApi: function (api) {
    $scope.grid = api.grid;
  }
};

Then you'd interate over your columns, filtering for those that have filters with terms filled in, and within in column iterate through its filters.

<span ng-repeat="col in grid.columns | hasFilterTerm">
  <strong ng-if="$first"><i>Filters:</i></strong>

  <strong>{{ col.name }}:</strong>
  <span ng-repeat="f in col.filters">
    {{ f.term }} <span ng-if="!$last">,</span>
  </span><span ng-if="!$last">;</span>
</span>

Your "column has active filter term" filter could be like this:

app.filter('hasFilterTerm', function () {
  return function (columns) {
    var cols = [];
    columns.forEach(function (c) {
      c.filters.forEach(function (f) {
        if (f.term) {
          cols.push(c);
        }
      });
    });
    return cols;
  }
});

Here's a demo plunker just showing the list of active filters below the grid: http://plnkr.co/edit/rpLcY3JztGjXOu2QMmEU?p=preview Inserting that into a custom header should be straightforward. You wouldn't need to expose the grid to your controller scope and could just iterate straight on grid.columns.

ui-grid enableFiltering events

1 Answers