FlexGridFilter Optimizations

The wijmo.grid.filter module provides a FlexGridFilter class that adds an Excel-style filtering UI to each column. The FlexGridFilter provides two types of filter: by value and by condition.

The value filter editor contains a list of unique values for the user to choose from. If the grid contains a lot of data, this list of unique values may take a while to generate. Furthermore, if the list contains too many values, it is not very useful (a condition filter may be more appropriate in these cases)

This sample shows how you can optimize the value filters in three ways:

1. uniqueValues: The 'Rating' column filter specifies the list of possible unique values in the column, so the filter does not have to scan the data to build the list.
2. maxValues: The 'Sales' column filter specifies that the list should show up to 20 values only. You may use the filter field in the editor to select which values you are interested in.
3. filterType: The 'Expenses' column filter specifies that the only filter type to be used is condition. A value filter will not even be displayed for this column.

import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridFilter from '@mescius/wijmo.grid.filter';

function init() {
    // FlexGridFilter client-side filtering
    var theGrid = new wjGrid.FlexGrid('#theGrid', {
        itemsSource: data
    });
    var filter = new wjGridFilter.FlexGridFilter(theGrid);
    
    // ratings are values from 0 to 5
    var filterRating = filter.getColumnFilter('rating');
    filterRating.valueFilter.uniqueValues = [0, 1, 2, 3, 4, 5];
    
    // limit number of values shown in sales filter
    var filterSales = filter.getColumnFilter('sales');
    filterSales.valueFilter.maxValues = 20;
    
    // filter expenses only by condition
    var filterExpenses = filter.getColumnFilter('expenses');
    filterExpenses.filterType = wjGridFilter.FilterType.Condition;
}