Custom Filter Operators

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 example, 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.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjCore from '@grapecity/wijmo'; import * as wjGridFilter from '@grapecity/wijmo.grid.filter'; import * as wjGrid from '@grapecity/wijmo.grid'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // customize the FlexGridFilter conditions var filter = wjCore.culture.FlexGridFilter, Operator = wjGridFilter.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 }, { name: 'Is smaller than', op: Operator.LT }, ]; 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 }, ]; 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 wjGrid.FlexGrid('#theGrid', { itemsSource: getData(), }); var f = new wjGridFilter.FlexGridFilter(theGrid); f.defaultFilterType = wjGridFilter.FilterType.Condition; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Custom Filter Operators</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="theGrid"></div> </div> </body> </html> // generate some random data export function getData() { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < 2000; i++) { data.push({ id: i, country: countries[i % countries.length], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, }); } return data; } .wj-flexgrid { max-height: 250px; margin:10px 0; } body { margin-bottom: 20px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import { WjGridFilterModule } from '@grapecity/wijmo.angular2.grid.filter'; import * as wjcCore from '@grapecity/wijmo'; import * as wjcGridFilter from '@grapecity/wijmo.grid.filter'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; constructor() { this.data = this._getData(); this._customizeFilterConditions(); } @ViewChild('filter') filter: wjcGridFilter.FlexGridFilter; ngAfterViewInit() { this.filter.defaultFilterType = wjcGridFilter.FilterType.Condition; } private _customizeFilterConditions() { // customize the FlexGridFilter conditions let filter = wjcCore.culture.FlexGridFilter, Operator = wjcGridFilter.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 ]; 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 smaller than', op: Operator.LT } ]; 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 } ]; } private _getData() { // create some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, }); } return data; } } @NgModule({ imports: [WjGridModule, WjGridFilterModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Custom Filter Operators</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <!-- the grid --> <wj-flex-grid #flex [(itemsSource)]="data"> <wj-flex-grid-filter #filter></wj-flex-grid-filter> </wj-flex-grid> </div> .wj-flexgrid { max-height: 250px; margin:10px 0; } body { margin-bottom: 20px; } <template> <div class="container-fluid"> <!-- the grid --> <wj-flex-grid :itemsSource="data"> <wj-flex-grid-filter :initialized="initialized"></wj-flex-grid-filter> </wj-flex-grid> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.grid"; import * as wjcGrid from "@grapecity/wijmo.grid"; import "@grapecity/wijmo.vue2.grid.filter"; import * as wjcCore from "@grapecity/wijmo"; import * as wjcGridFilter from "@grapecity/wijmo.grid.filter"; let App = Vue.extend({ name: "app", data: function() { return { data: this.getData() }; }, methods: { customizeFilterConditions: function() { // customize the FlexGridFilter conditions let filter = wjcCore.culture.FlexGridFilter, Operator = wjcGridFilter.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 ]; 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 smaller than", op: Operator.LT } ]; 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 } ]; }, getData: function() { // create some random data let countries = "US,Germany,UK,Japan,Italy,Greece".split(","), data = []; for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; }, initialized: function(filter) { this.filter = filter; this.filter.defaultFilterType = wjcGridFilter.FilterType.Condition; } }, created: function() { this.customizeFilterConditions(); } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20px; } /* show images on filtered columns */ .custom-icons .wj-glyph-filter { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABKUlEQVQ4ja2QP0vDQBiHf/cndzQhJKGGK6HQHFnsII4h4GfQqas4+zGcXDs5dNRPYj+EoFt316CDPZcrhNY0Mb0HnuV43+e4AxxhjKF1XU+bZ3MANwOdH9wghHgAYIZod/8OKqWWRVHc9VEptWwNJklyBeCbUrrRWs8Wi4U4ptZ6RindAPiyu4cEQXALYMsYM57nHZUxZgBs7U47vu/3/ks72wlhjL10xRhjz31iAICqqkac83VbjHO+rqpq1DsIAGEYjoUQH1JK01QI8R6G4fhfsR15nk+SJLlomuf5ZFAMANI0fcTec+3ZacEoilZRFK2cBQGcW90EpZT3ToJKqWtCyCcA43ne28lBAMiy7ExK+UQI+XES3BHH8aWU8tVZ0ELKspx2jznkF5WQhrjMdSwdAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-position: bottom right; margin-top: 2px; width: 20px; height: 20px; border: none; } .custom-icons .wj-glyph-filter:after { display: none; } /* make active filter images 25% larger */ .custom-icons .wj-filter-on .wj-glyph-filter { transform: scale(1.25); } /* change the color of the filter glyphs */ .custom-colors .wj-glyph-filter { color: red; font-size: 125%; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjGrid from '@grapecity/wijmo.react.grid'; import * as wjcCore from "@grapecity/wijmo"; import * as wjFilter from "@grapecity/wijmo.react.grid.filter"; import * as wjcGridFilter from "@grapecity/wijmo.grid.filter"; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return <div className="container-fluid"> <wjGrid.FlexGrid itemsSource={this.state.data}> <wjFilter.FlexGridFilter> </wjFilter.FlexGridFilter> </wjGrid.FlexGrid> </div>; } initialized(filter) { this.filter = filter; this.filter.defaultFilterType = wjcGridFilter.FilterType.Condition; } customizeFilterConditions() { // customize the FlexGridFilter conditions let filter = wjcCore.culture.FlexGridFilter, Operator = wjcGridFilter.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 }, { name: "Is smaller than", op: Operator.LT } // added ]; 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 smaller than", op: Operator.LT } ]; 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 } ]; } componentDidMount() { this.customizeFilterConditions(); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Custom Filter Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20px; } /* show images on filtered columns */ .custom-icons .wj-glyph-filter { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABKUlEQVQ4ja2QP0vDQBiHf/cndzQhJKGGK6HQHFnsII4h4GfQqas4+zGcXDs5dNRPYj+EoFt316CDPZcrhNY0Mb0HnuV43+e4AxxhjKF1XU+bZ3MANwOdH9wghHgAYIZod/8OKqWWRVHc9VEptWwNJklyBeCbUrrRWs8Wi4U4ptZ6RindAPiyu4cEQXALYMsYM57nHZUxZgBs7U47vu/3/ks72wlhjL10xRhjz31iAICqqkac83VbjHO+rqpq1DsIAGEYjoUQH1JK01QI8R6G4fhfsR15nk+SJLlomuf5ZFAMANI0fcTec+3ZacEoilZRFK2cBQGcW90EpZT3ToJKqWtCyCcA43ne28lBAMiy7ExK+UQI+XES3BHH8aWU8tVZ0ELKspx2jznkF5WQhrjMdSwdAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-position: bottom right; margin-top: 2px; width: 20px; height: 20px; border: none; } .custom-icons .wj-glyph-filter:after { display: none; } /* make active filter images 25% larger */ .custom-icons .wj-filter-on .wj-glyph-filter { transform: scale(1.25); } /* change the color of the filter glyphs */ .custom-colors .wj-glyph-filter { color: red; font-size: 125%; } export function getData() { // create some random data let countries = "US,Germany,UK,Japan,Italy,Greece".split(","), data = []; for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; }