Filter with “OR” And “AND” Conditions on Multiple Fields

Here is a minimal example of combining multiple filters using OData from Northwind: https://embed.plnkr.co/AoIZI4/. The complete list can be found here.

When instantiating a filter, instead of path, operator, and value1, use the properties filters and and to combine multiple filters as shown in the Filter API reference.

In our case, we define three filters:

  • One for the first field-A NE 'O' which is also used on the initial binding in the Plunker example above (Filter 1)
  • And for the other two in the search event handler with and: false meaning OR (Filter 2).

Filter 1:

getInitialFilter: function() {
  return new Filter("Field-A", FilterOperator.NE, "O");
},

Filter 2:

getSearchFilters: function(query) {
  return new Filter({
    filters: [
      new Filter("Field-B", FilterOperator.Contains, query),
      new Filter("Field-C", FilterOperator.Contains, query),
    ],
    and: false,
  });
},

Finally, when the user enters a search query, we combine those two filters with and: true applying on the ODataListBinding.

onSearch: function(event) {
  this.byId("myList").getBinding("items").filter(new Filter({
    filters: [
      this.getInitialFilter(),
      this.getSearchFilters(event.getParameter("query")),
    ],
    and: true,
  }), FilterType.Application);
},

Note: When filtering, keep in mind to apply the FilterType "Application" as the 2nd argument in myListBinding.filter to let the framework know that the filter was set by you (application) and not by a control. Otherwise, the list binding will combine your filters with the application filters which were initially set.

Leave a Comment