CollectionView Filtering

The CollectionView has a filter property that can be used to specify a filter function. The filter function defines which items should be included in the view when the filter is applied. The sample below provides some predefined 'select' filters defined by the filter function.

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 { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create a CollectionView let view = new wijmo.CollectionView(getData()); // // show filtered item count view.collectionChanged.addHandler(() => { let cnt = document.getElementById('cnt'); cnt.textContent = wijmo.format('{length:n0}', view.items); }); // // initialize item count display view.onCollectionChanged(); // // show the data in a grid let flex = new grid.FlexGrid('#theGrid', { itemsSource: view, alternatingRowStep: 0, headersVisibility: 'Column' }); // // change the filter document.addEventListener('change', e => { let filterType = e.target.value; // view.filter = (item) => { switch (filterType) { case 'country': return item.country == 'US'; case 'sales': return item.sales > 9000; case 'downloads': return item.downloads > 19000; default: return true; } }; }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Filtering Overview</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"> <label> <input type="radio" name="filter" value="" checked="true" /> No Filter </label> <label> <input type="radio" name="filter" value="country" /> US only </label> <label> <input type="radio" name="filter" value="sales" /> Sales > 9,000 </label> <label> <input type="radio" name="filter" value="downloads" /> Downloads > 19,000 </label> <p> Result (<span id="cnt"></span> items): </p> <div id="theGrid"> </div> </div> </body> </html> // export function getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < 1000; 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; } label { width: 100% } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; // 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 { DataService, TDataItem } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { view: wijmo.CollectionView; // constructor(@Inject(DataService) private dataService: DataService) { this.view = new wijmo.CollectionView(dataService.getData()); // // change the filter document.addEventListener('change', e => { let filterType = (<HTMLInputElement>e.target).value; // this.view.filter = (item: TDataItem) => { switch (filterType) { case 'country': return item.country == 'US'; case 'sales': return item.sales > 9000; case 'downloads': return item.downloads > 19000; default: return true; } } }); } } // @NgModule({ imports: [WjGridModule, 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 CollectionView Filtering Overview</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"> <label> <input type="radio" name="filter" value="" checked="true" /> No Filter </label> <label> <input type="radio" name="filter" value="country" /> US only </label> <label> <input type="radio" name="filter" value="sales" /> Sales > 9,000 </label> <label> <input type="radio" name="filter" value="downloads" /> Downloads > 19,000 </label> <p> Result ({{ view.items.length | number:0 }} items): </p> <wj-flex-grid [itemsSource]="view" [alternatingRowStep]="0" [headersVisibility]="'Column'"> </wj-flex-grid> </div> import { Injectable } from '@angular/core'; // export type TDataItem = { id: number; country: string; downloads: number; sales: number; expenses: number; } // @Injectable() export class DataService { getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data: TDataItem[] = []; // for (let i = 0; i < 1000; 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; } label { width: 100% } <template> <div class="container-fluid"> <label> <input type="radio" name="filter" value="" checked="true" /> No Filter </label> <label> <input type="radio" name="filter" value="country" /> US only </label> <label> <input type="radio" name="filter" value="sales" /> Sales > 9,000 </label> <label> <input type="radio" name="filter" value="downloads" /> Downloads > 19,000 </label> <p> Result ({{ view.items.length }} items): </p> <wj-flex-grid :items-source="view" :show-alternating-rows=false headers-visibility="Column"> </wj-flex-grid> </div> </template> <script> import "bootstrap.css"; import "@grapecity/wijmo.styles/wijmo.css"; import Vue from 'vue'; import * as wjCore from '@grapecity/wijmo'; import { getData } from './data'; import { WjGridModule } from '@grapecity/wijmo.vue2.grid'; import { WjGridFilterModule } from '@grapecity/wijmo.vue2.grid.filter'; new Vue({ el: '#app', data:{ view: new wjCore.CollectionView(getData()) }, mounted: function(){ document.addEventListener('change', e => { let filterType = (e.target).value; // this.view.filter = (item) => { switch (filterType) { case 'country': return item.country == 'US'; case 'sales': return item.sales > 9000; case 'downloads': return item.downloads > 19000; default: return true; } } }); } }) </script> <style> .container-fluid .wj-flexgrid { max-height: 250px; } label { width: 100% } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity CollectionView Filtering Overview</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(callback, delay) { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < 1000; 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; } 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 wjCore from '@grapecity/wijmo'; import * as wjGrid from '@grapecity/wijmo.react.grid'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = { view: new wjCore.CollectionView(getData()) }; } render() { return <div className="container-fluid"> <label> <input type="radio" name="filter" value="" defaultChecked={true}/> No Filter </label> <label> <input type="radio" name="filter" value="country"/> US only </label> <label> <input type="radio" name="filter" value="sales"/> Sales > 9,000 </label> <label> <input type="radio" name="filter" value="downloads"/> Downloads > 19,000 </label> <p> Result ({this.state.view.items.length} items): </p> <wjGrid.FlexGrid showAlternatingRows={false} headersVisibility="Column" itemsSource={this.state.view}> </wjGrid.FlexGrid> </div>; } componentDidMount() { document.addEventListener('change', (e) => { let filterType = e.target.value; // this.setState(Object.assign(this.state.view, { filter: (item) => { switch (filterType) { case 'country': return item.country == 'US'; case 'sales': return item.sales > 9000; case 'downloads': return item.downloads > 19000; default: return true; } } })); }); } } 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 CollectionView Filtering Overview</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; } label { width: 100% } export function getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], data = []; // for (let i = 0; i < 1000; 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; }