Custom UIs

The FlexGridFilter class is localizable, and you can take advantage of that to customize its UI by modifying the strings shown to users and also the lists of conditions and operators. In this fiddle, we customized the list of operators by assigning custom arrays to the filter's stringOperators, numberOperators, dateOperators, and booleanOperators.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as grid from '@grapecity/wijmo.grid'; import * as gridFilter from '@grapecity/wijmo.grid.filter'; // import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // customize grid filter conditions let filter = wijmo.culture.FlexGridFilter, Operator = gridFilter.Operator; // filter.stringOperators = [ { name: '(not set)', op: null }, { name: 'Same', op: Operator.EQ }, { name: 'Different', op: Operator.NE }, { name: 'Bigger', op: Operator.GT }, { name: 'Smaller', op: Operator.LT } ]; // filter.numberOperators = [ { name: '(not set)', Operator: null }, { name: 'Same', op: Operator.EQ }, { name: 'Different', op: Operator.NE }, { name: 'Bigger', op: Operator.GT }, { name: 'Smaller', op: Operator.LT } ]; // filter.dateOperators = [ { name: '(not set)', op: null }, { name: 'Same', op: Operator.EQ }, { name: 'Earlier', op: Operator.LT }, { name: 'Later', op: Operator.GT } ]; // filter.booleanOperators = [ { name: '(not set)', op: null }, { name: 'Is', op: Operator.EQ }, { name: 'Isn\'t', op: Operator.NE } ]; // // create the grid and the filter let flex = new grid.FlexGrid('#theGrid', { itemsSource: getData() }); let flexGridFilter = new gridFilter.FlexGridFilter(flex); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Globalization/Customization</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> export function getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // return data; } body { margin-bottom: 24px; } .wj-flexgrid { max-height: 300px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as gridFilter from '@grapecity/wijmo.grid.filter'; // import { Component, Inject, enableProdMode, NgModule } 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 { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); // // customize grid filter conditions let filter = wijmo.culture.FlexGridFilter, Operator = gridFilter.Operator; // filter.stringOperators = [ { name: '(not set)', op: null }, { name: 'Same', op: Operator.EQ }, { name: 'Different', op: Operator.NE }, { name: 'Bigger', op: Operator.GT }, { name: 'Smaller', op: Operator.LT } ]; // filter.numberOperators = [ { name: '(not set)', Operator: null }, { name: 'Same', op: Operator.EQ }, { name: 'Different', op: Operator.NE }, { name: 'Bigger', op: Operator.GT }, { name: 'Smaller', op: Operator.LT } ]; // filter.dateOperators = [ { name: '(not set)', op: null }, { name: 'Same', op: Operator.EQ }, { name: 'Earlier', op: Operator.LT }, { name: 'Later', op: Operator.GT } ]; // filter.booleanOperators = [ { name: '(not set)', op: null }, { name: 'Is', op: Operator.EQ }, { name: 'Isn\'t', op: Operator.NE } ]; } } // @NgModule({ imports: [WjGridModule, WjGridFilterModule, BrowserModule], declarations: [AppComponent], providers: [DataService], 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 Globalization/Customization</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"> <wj-flex-grid [itemsSource]="data"> <wj-flex-grid-filter></wj-flex-grid-filter> </wj-flex-grid> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // return data; } } body { margin-bottom: 24px; } .wj-flexgrid { max-height: 300px; } <template> <div class="container-fluid"> <wj-flex-grid :itemsSource="data"> <wj-flex-grid-filter></wj-flex-grid-filter> </wj-flex-grid> </div> </template> <script> import "bootstrap.css"; import "@grapecity/wijmo.styles/wijmo.css"; import Vue from "vue"; import '@grapecity/wijmo.vue2.grid'; import '@grapecity/wijmo.vue2.grid.filter'; import * as wjCore from "@grapecity/wijmo"; import { getData } from "./data"; import * as gridFilter from '@grapecity/wijmo.grid.filter'; let App = Vue.extend({ name: "app", data: function() { return { data: getData() }; }, created: function() { // customize grid filter conditions let filter = wijmo.culture.FlexGridFilter, Operator = gridFilter.Operator; // filter.stringOperators = [ { name: "(not set)", op: null }, { name: "Same", op: Operator.EQ }, { name: "Different", op: Operator.NE }, { name: "Bigger", op: Operator.GT }, { name: "Smaller", op: Operator.LT } ]; // filter.numberOperators = [ { name: "(not set)", Operator: null }, { name: "Same", op: Operator.EQ }, { name: "Different", op: Operator.NE }, { name: "Bigger", op: Operator.GT }, { name: "Smaller", op: Operator.LT } ]; // filter.dateOperators = [ { name: "(not set)", op: null }, { name: "Same", op: Operator.EQ }, { name: "Earlier", op: Operator.LT }, { name: "Later", op: Operator.GT } ]; // filter.booleanOperators = [ { name: "(not set)", op: null }, { name: "Is", op: Operator.EQ }, { name: "Isn't", op: Operator.NE } ]; } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> body { margin-bottom: 24px; } .container-fluid .wj-flexgrid { max-height: 300px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Globalization/Customization</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> export function getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // return data; } 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 wjGridFilter from '@grapecity/wijmo.react.grid.filter'; import * as wijmo from "@grapecity/wijmo"; import * as gridFilter 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}> <wjGridFilter.FlexGridFilter></wjGridFilter.FlexGridFilter> </wjGrid.FlexGrid> </div>; } componentWillMount() { // customize grid filter conditions let filter = wijmo.culture.FlexGridFilter, Operator = gridFilter.Operator; // filter.stringOperators = [ { name: "(not set)", op: null }, { name: "Same", op: Operator.EQ }, { name: "Different", op: Operator.NE }, { name: "Bigger", op: Operator.GT }, { name: "Smaller", op: Operator.LT } ]; // filter.numberOperators = [ { name: "(not set)", Operator: null }, { name: "Same", op: Operator.EQ }, { name: "Different", op: Operator.NE }, { name: "Bigger", op: Operator.GT }, { name: "Smaller", op: Operator.LT } ]; // filter.dateOperators = [ { name: "(not set)", op: null }, { name: "Same", op: Operator.EQ }, { name: "Earlier", op: Operator.LT }, { name: "Later", op: Operator.GT } ]; // filter.booleanOperators = [ { name: "(not set)", op: null }, { name: "Is", op: Operator.EQ }, { name: "Isn't", op: Operator.NE } ]; } } 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>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'); </script> </head> <body> <div id="app"></div> </body> </html> body { margin-bottom: 24px; } .wj-flexgrid { max-height: 300px; } export function getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // return data; }