The wj-flex-grid-filter directive must be contained in a wijmo.angular.grid.WjFlexGrid directive. For example:

<p>Here is a FlexGrid control with column filters:</p>
<wj-flex-grid items-source="data">
  <wj-flex-grid-filter filter-columns="['country', 'expenses']"></wj-flex-grid-filter>
 
  <wj-flex-grid-column
    header="Country"
    binding="country">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    header="Sales"
    binding="sales">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    header="Expenses"
    binding="expenses">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    header="Downloads"
    binding="downloads">
  </wj-flex-grid-column>
 </wj-flex-grid>

The wj-flex-grid-filter directive supports the following attributes:

filter-columns

= An array containing the names or bindings of the columns to filter.

show-filter-icons

@ The value indicating whether filter editing buttons appear in the grid's column headers.

filter-changing

& Handler for the FlexGridFilter.filterChanging event.

filter-changed

& Handler for the FlexGridFilter.filterChanged event.

filter-applied

& Handler for the FlexGridFilter.filterApplied event.