wijmo.httpRequest Method

Wijmo provides a wrapper for making HTTP requests through the httpRequest method. You can use it to make configure http requests and handle responses. This sample uses the httpRequest method to retrieve items from an OData service.

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'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // make the request wijmo.httpRequest('https://services.odata.org/Northwind/Northwind.svc/Categories', { data: { '$format': 'json', '$select': 'CategoryID,CategoryName,Description' }, success: (xhr) => { // show results in a grid let flexGrid = new grid.FlexGrid('#theGrid', { isReadOnly: true, itemsSource: JSON.parse(xhr.responseText).value, columns: [ { binding: 'CategoryID' }, { binding: 'CategoryName' }, { binding: 'Description', width: '*' } // make last column fill the grid ] }); } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity HttpRequest</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: 200px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; // import { Component, 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'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any = null; // constructor() { // make the request wijmo.httpRequest('https://services.odata.org/Northwind/Northwind.svc/Categories', { data: { '$format': 'json', '$select': 'CategoryID,CategoryName,Description' }, success: (xhr: XMLHttpRequest) => { this.data = JSON.parse(xhr.responseText).value; } }) } } // @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 HttpRequest</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 *ngIf="data" [isReadOnly]="true" [itemsSource]="data"> <wj-flex-grid-column [binding]="'CategoryID'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'CategoryName'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'Description'" [width]="'*'"></wj-flex-grid-column> </wj-flex-grid> </div> .wj-flexgrid { max-height: 200px; } <template> <div class="container-fluid"> <wj-flex-grid v-if="data" :isReadOnly="true" :itemsSource="data"> <wj-flex-grid-column :binding="'CategoryID'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'CategoryName'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'Description'" :width="'*'"></wj-flex-grid-column> </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 * as wijmo from "@grapecity/wijmo"; let App = Vue.extend({ name: "app", data: function() { return { data: [] }; }, created: function() { wijmo.httpRequest( "https://services.odata.org/Northwind/Northwind.svc/Categories", { data: { $format: "json", $select: "CategoryID,CategoryName,Description" }, success: xhr => { this.data = JSON.parse(xhr.responseText).value; } } ); } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .container-fluid .wj-flexgrid { max-height: 200px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity HttpRequest</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 wijmo from '@grapecity/wijmo'; import * as wjGrid from '@grapecity/wijmo.react.grid'; class App extends React.Component { constructor(props) { super(props); this.state = { data: [] }; } render() { return <div className="container-fluid"> {this.state.data ? (<wjGrid.FlexGrid isReadOnly={true} itemsSource={this.state.data}> <wjGrid.FlexGridColumn binding="CategoryID"> </wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="CategoryName"> </wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="Description" width="*"> </wjGrid.FlexGridColumn> </wjGrid.FlexGrid>) : null} </div>; } componentWillMount() { wijmo.httpRequest("https://services.odata.org/Northwind/Northwind.svc/Categories", { data: { $format: "json", $select: "CategoryID,CategoryName,Description" }, success: (xhr) => { this.setState({ data: JSON.parse(xhr.responseText).value }); } }); } } 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> .wj-flexgrid { max-height: 200px; }