ODataCollectionView

Wijmo includes an ODataCollectionView class that extends CollectionView to provide support for OData sources. OData is an OASIS standard that defines a set of best practices for building and consuming RESTful APIs. To use the ODataCollectionView class, create a new instance passing the URL of the data service, the name of the table you want to access, any optional parameters such as the fields you want to retrieve and whether you want filtering, sorting, and paging to be performed on the server or on the client.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { ODataCollectionView } from '@grapecity/wijmo.odata'; import { FlexGrid } from '@grapecity/wijmo.grid'; import { FlexGridFilter } from '@grapecity/wijmo.grid.filter'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // get customer list from Northwind OData service var url = 'https://services.odata.org/Northwind/Northwind.svc'; var customers = new ODataCollectionView(url, 'Customers', { sortOnServer: true, filterOnServer: true }); // show the data on a grid var itemCountElement = document.getElementById('itemCount'); var theGrid = new FlexGrid('#theGrid', { itemsSource: customers, isReadOnly: true, loadedRows: function () { itemCountElement.innerHTML = theGrid.rows.length + ' items'; } }); // add a filter to the grid var f = new FlexGridFilter(theGrid); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid ODataCollectionView Binding</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"> <p id="itemCount"></p> <div id="theGrid"></div> </div> </body> </html> .wj-flexgrid { height: 300px; } body { margin-bottom: 20pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { ODataCollectionView } from '@grapecity/wijmo.odata'; import * as wjcGrid from '@grapecity/wijmo.grid'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import { WjGridFilterModule } from '@grapecity/wijmo.angular2.grid.filter'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { customers: ODataCollectionView; itemCount: string; // DataSvc will be passed by derived classes constructor() { let url = 'https://services.odata.org/Northwind/Northwind.svc'; this.customers = new ODataCollectionView(url, 'Customers', { sortOnServer: true, filterOnServer: true }); } flexInitialized(flexgrid: wjcGrid.FlexGrid) { flexgrid.loadedRows.addHandler(()=> { this.itemCount = flexgrid.rows.length + ' items'; }); } } // @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 ODataCollectionView Binding</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"> <p>{{itemCount}}</p> <!-- the grid --> <wj-flex-grid #flex [(itemsSource)]="customers" (initialized)="flexInitialized(flex)"> <wj-flex-grid-filter></wj-flex-grid-filter> </wj-flex-grid> </div> .wj-flexgrid { height: 400px; margin: 6px 0; } <template> <div class="container-fluid"> <p>{{itemCount}}</p> <!-- the grid --> <wj-flex-grid :itemsSource="customers" :initialized="flexInitialized"> <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 wjcCore from "@grapecity/wijmo"; import "@grapecity/wijmo.vue2.grid.filter"; import { ODataCollectionView } from "@grapecity/wijmo.odata"; let App = Vue.extend({ name: "app", data: function() { return { itemCount: "", customers: new ODataCollectionView("https://services.odata.org/Northwind/Northwind.svc", "Customers", { sortOnServer: true, filterOnServer: true }) }; }, methods: { flexInitialized(flexgrid) { flexgrid.loadedRows.addHandler(() => { this.itemCount = flexgrid.rows.length + " items"; }); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { height: 400px; margin: 6px 0; } </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 { ODataCollectionView } from '@grapecity/wijmo.odata'; import * as wjFilter from '@grapecity/wijmo.react.grid.filter'; class App extends React.Component { constructor(props) { super(props); this.state = { customers: new ODataCollectionView("https://services.odata.org/Northwind/Northwind.svc", "Customers", { sortOnServer: true, filterOnServer: true }), itemCount: "" }; } render() { return (<div className="container-fluid"> <p>{this.state.itemCount}</p> <wjGrid.FlexGrid initialized={this.flexInitialized.bind(this)} itemsSource={this.state.customers}> <wjFilter.FlexGridFilter /> </wjGrid.FlexGrid> </div>); } flexInitialized(flexgrid) { flexgrid.loadedRows.addHandler(() => { this.setState({ itemCount: flexgrid.rows.length + " items" }); }); } } 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 Data Binding Basic</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 { height: 400px; margin: 6px 0; }