Server-Side Filtering

If you are loading data from an OData source with the ODataCollectionView class, the FlexGridFilter can provide server-side filtering automatically. Set the view's sortOnServer property to true and the FlexGridFilter will automatically convert your filter conditions into OData filter statements to be handled on the server.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import * as wjOdata from '@grapecity/wijmo.odata'; import * as wjGridFilter from '@grapecity/wijmo.grid.filter'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // FlexGridFilter server-side filtering var svcUrl = 'https://services.odata.org/Northwind/Northwind.svc'; var theGrid = new wjGrid.FlexGrid('#theGrid', { isReadOnly: true, itemsSource: new wjOdata.ODataCollectionView(svcUrl, 'Customers', { filterOnServer: true, sortOnServer: true }), }); var serverFilter = new wjGridFilter.FlexGridFilter(theGrid); // // optionally set default filter type to 'Condition' to // avoid requests that exceed URL length limits serverFilter.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 Serve-side 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 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 { WjGridFilterModule } from '@grapecity/wijmo.angular2.grid.filter'; import * as wjcGridFilter from '@grapecity/wijmo.grid.filter'; import * as wjcOData from '@grapecity/wijmo.odata'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: wjcOData.ODataCollectionView; constructor() { let svcUrl = 'https://services.odata.org/Northwind/Northwind.svc'; this.data = new wjcOData.ODataCollectionView(svcUrl, 'Customers', { filterOnServer: true, sortOnServer: true }); } @ViewChild('filter') filter: wjcGridFilter.FlexGridFilter; ngAfterViewInit() { this.filter.defaultFilterType = wjcGridFilter.FilterType.Condition; } } @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 Serve-side 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"> <!-- 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></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'; import * as wjcOData from '@grapecity/wijmo.odata'; let App = Vue.extend({ name: "app", data: function() { return { data: new wjcOData.ODataCollectionView( "https://services.odata.org/Northwind/Northwind.svc", "Customers", { filterOnServer: true, sortOnServer: true } ) }; }, methods: { initialized: function(filter) { filter.defaultFilterType = wjcGridFilter.FilterType.Condition; } } }); 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 * as wjFilter from "@grapecity/wijmo.react.grid.filter"; import * as wjcGridFilter from '@grapecity/wijmo.grid.filter'; import * as wjcOData from '@grapecity/wijmo.odata'; class App extends React.Component { constructor(props) { super(props); this.state = { data: new wjcOData.ODataCollectionView("https://services.odata.org/Northwind/Northwind.svc", "Customers", { filterOnServer: true, sortOnServer: true }) }; } render() { return <div className="container-fluid"> <wjGrid.FlexGrid itemsSource={this.state.data}> <wjFilter.FlexGridFilter> </wjFilter.FlexGridFilter> </wjGrid.FlexGrid> </div>; } initialized(filter) { filter.defaultFilterType = wjcGridFilter.FilterType.Condition; } } 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; }