# FlexGridFilter

The FlexGridFilter extension (wijmo.grid.filter.js) allows you to add a filtering UI to any FlexGrid control.

The filtering UI adds filter icons to the grid's column headers. Clicking the icons brings up an editor where users can select the values to show (value filter) or they can set up conditions that must be satisfied by the values (condition filter).

You may also customize the filter to show specific types of filter on each column, as this sample does.

To use the extension, include the file in your page and enable filtering like so:

    // add column filters to the flexGrid control
    import * as wjcGridFilter from 'wijmo/wijmo.grid.filter';
    var filter = new wjcGridFilter.FlexGridFilter(flexGrid);

If you are using Angular, you can simply use the wj-flex-grid-filter directive:

    <!-- create a FlexGrid with column filters -->
    <wj-flex-grid ... >
        <wj-flex-grid-filter #filter ></wj-flex-grid-filter>
    </wj-flex-grid>

Now showing {{data.items.length | number}} items.

### Configure the filter

The FlexGridFilter class has properties and methods that allow you to customize the filter behavior. For example, you can turn off the filter icons, change the default filter type (value and/or condition), or change the filter type for specific columns.

    // Show filter icons
    <label>
      Show filter icons
     <input type="checkbox" [(ngModel)]="filter.showFilterIcons" />
    </label>

    // Clear the filter, save and load filter definitions to local storage:
    <button class="btn btn-default" (click)="filter.clear()">
        Clear
    </button>

    // Set the default filter type:
    <wj-menu [header]="'Filter Type'"
             [(value)]="filter.defaultFilterType">
        <wj-menu-item [value]="0">None</wj-menu-item>
        <wj-menu-item [value]="1">Condition</wj-menu-item>
        <wj-menu-item [value]="2">Value</wj-menu-item>
        <wj-menu-item [value]="3">Both</wj-menu-item>
    </wj-menu>

    // Set the filter type for the "Downloads" column:
    <wj-menu [header]="'Filter Type'"
             [(value)]="downloadsColumnFilterType">
        <wj-menu-item [value]="0">None</wj-menu-item>
        <wj-menu-item [value]="1">Condition</wj-menu-item>
        <wj-menu-item [value]="2">Value</wj-menu-item>
        <wj-menu-item [value]="3">Both</wj-menu-item>
    </wj-menu>

Show filter icons

Clear the filter, save and load filter definitions to local storage:

Set the default filter type: None Condition Value Both

Set the filter type for the "Downloads" column: None Condition Value Both

The filter editor is localizable: Arabic (U.A.E.) Basque Bulgarian Catalan Chinese Chinese (Traditional, Hong Kong SAR) Chinese (Traditional, Taiwan) Croatian Czech Danish Dutch English English (United Kingdom) Estonian Finnish French French (Canada) Galician German Greek Hebrew Hindi Hungarian Indonesian Italian Japanese Kazakh Korean Latvian Lithuanian Norwegian Polish Portuguese Romanian Russian Serbian Slovak Slovenian Swedish Thai Turkish Ukrainian