Filtering

You can use the grid's collectionView.filter property directly. This is easy to do and very flexible, but you have to implement the filter UI yourself. For example, this grid allows you to filter the data by country:

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // generate some random data var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var 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, }); } // // basic filtering var theGrid = new wjGrid.FlexGrid('#theGrid', { itemsSource: data, }); document.getElementById('filter').addEventListener('input', function (e) { var filter = e.target.value.toLowerCase(); theGrid.collectionView.filter = function (item) { return filter.length == 0 || item.country.toLowerCase().indexOf(filter) > -1; }; }); // } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Filtering</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 class="input-group"> <div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div> <input id="filter" class="form-control" placeholder="Country Filter"> </div> <div id="theGrid"> </div> </div> </body> </html> .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 * as wjcGrid from '@grapecity/wijmo.grid'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; constructor() { this.data = this._getData(); } @ViewChild('flex') flex: wjcGrid.FlexGrid; filter(e: any) { let filter = (<HTMLInputElement>e.target).value.toLowerCase(); this.flex.collectionView.filter = (item: any) => { return filter.length == 0 || item.country.toLowerCase().indexOf(filter) > -1 } } 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, 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 Filtering</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"> <div class="input-group"> <div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div> <input (input)="filter($event)" class="form-control" placeholder="Country Filter"> </div> <!-- the grid --> <wj-flex-grid #flex [(itemsSource)]="data"> </wj-flex-grid> </div> .wj-flexgrid { max-height: 250px; margin:10px 0; } body { margin-bottom: 20px; } <template> <div class="container-fluid"> <div class="input-group"> <div class="input-group-addon"> <span class="glyphicon glyphicon-search"></span> </div> <input @input="filter($event)" class="form-control" placeholder="Country Filter"> </div> <!-- the grid --> <wj-flex-grid :itemsSource="data" :initialized="initialized"></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"; let App = Vue.extend({ name: "app", data: function() { return { data: this.getData() }; }, methods: { filter: function(e) { let filter = e.target.value.toLowerCase(); this.flex.collectionView.filter = item => { return ( filter.length == 0 || item.country.toLowerCase().indexOf(filter) > -1 ); }; }, 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(flex) { this.flex = flex; } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20px; } </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 { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return <div className="container-fluid"> <div className="input-group"> <div className="input-group-addon"> <span className="glyphicon glyphicon-search"></span> </div> <input onInput={this.filter.bind(this)} className="form-control" placeholder="Country Filter"/> </div> <wjGrid.FlexGrid initialized={this.initialized.bind(this)} itemsSource={this.state.data}> </wjGrid.FlexGrid> </div>; } filter(e) { console.log("filter " + e); let filter = e.target.value.toLowerCase(); this.flex.collectionView.filter = item => { return (filter.length == 0 || item.country.toLowerCase().indexOf(filter) > -1); }; } initialized(flex) { this.flex = flex; } } 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; } 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; }