AngularJS ui-grid re-using a custom filter

Question

I have a basic grid with a couple of columns that are ranges, i.e. 10 - 50, 0 - 9, etc. and I've written a custom filter on one of the columnDefs;

filter: {
  condition: function(searchTerm, cellValue) { ... }
}

The filter works perfectly, but I'd like to strip it out and re-use it, only I can't figure out how.

I've tried defining it in the controller as function rangeFilter(...) and vm.rangeFilter = rangeFilter and then assigning it to the condition as grid.appScope.filterRange(searchTerm, cellValue) but that doesn't work.

I'm not really sure how else I'd do it, I haven't been able to find anything in the documentation or by googling for it.

Here's a plunkr of it in action; http://next.plnkr.co/edit/mbtXzfWqBg8FIALu

Jaydo · Accepted Answer · 2018-06-26 04:11:06Z

1

As you did, move the function out of the column definitions.

function rangeFilter() {
    ...
}

And in the column definitions pass a reference to the function in both.

vm.gridOptions = {
    ...
    columnDefs: [
      // default
      { field: 'name' },
      { field: 'range', cellFilter: 'range', filter: {condition: rangefilter}},
      // I want to reuse the same filter as 'range' for this column somehow...
      { field: 'anotherRange', cellFilter: 'range', filter: {condition: rangefilter}}
    ],
    ...
  };

Plunker

answered Jun 26, 2018 at 4:11

Jaydo

1,8692 gold badges16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Trent Over a year ago

Ah. Didn't expect that to work! Was expecting something similar to the way custom field getters are documented, where you pass 'getRange()' to the field property. Thanks!

Collectives™ on Stack Overflow

AngularJS ui-grid re-using a custom filter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related