Custom Filter Operators in FlexGrid

The FlexGridFilter class is localizable, and you can take advantage of that not only to customize the strings displayed in the UI, but also which filter conditions to show for each data type.

In this fiddle, we customized the list of operators by assigning custom arrays to the filter's stringOperators, numberOperators, dateOperators, and booleanOperators. Open the filter drop-downs to see the effect.

This technique allows you to re-order, remove, and include operators for each data type. It does not allow you to create new, custom operators. For that, you would have to fork the source code and customize it.

// customize the FlexGridFilter conditions
var filter = wijmo.culture.FlexGridFilter,
    Operator = wijmo.grid.filter.Operator;
filter.stringOperators = [
    { name: '(doesn\'t matter)', op: null },
    { name: 'Is', op: Operator.EQ },
    { name: 'Is not', op: Operator.NE },
    { name: 'Is bigger than', op: Operator.GT }, // added
    { name: 'Is smaller than', op: Operator.LT }, // added
    //{ name: 'Begins with', op: Operator.BW },
    //{ name: 'Ends with', op: Operator.EW },
    //{ name: 'Has', op: Operator.CT },
    //{ name: 'Hasn\'t', op: Operator.NC }
];
filter.numberOperators = [
    { name: '(doesn\'t matter)', op: null },
    { name: 'Is', op: Operator.EQ },
    { name: 'Is not', op: Operator.NE },
    { name: 'Is bigger than', op: Operator.GT },
    //{ name: 'Is Greater than or equal to', op: Operator.GE },
    { name: 'Is smaller than', op: Operator.LT },
    //{ name: 'Is Less than or equal to', op: Operator.LE }
    ];
filter.dateOperators = [
    { name: '(doesn\'t matter)', op: null },
    { name: 'Is', op: Operator.EQ },
    { name: 'Is earlier than', op: Operator.LT },
    { name: 'Is later than', op: Operator.GT }
];
filter.booleanOperators = [
    { name: '(not set)', op: null },
    { name: 'Is', op: Operator.EQ },
    { name: 'Is not', op: Operator.NE },
];

// create a grid with a filter
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: getData(),
});
var f = new wijmo.grid.filter.FlexGridFilter(theGrid);
f.defaultFilterType = 'Condition';