OData Service
To fetch data from an OData service, implement an ODataStore. Use its properties to specify the service's url, key data field, and OData version if it is different from 2.
You can configure ODataStore as a standalone element (see OData for details), but this demo assigns ODataStore settings to the store field of the DataSource configuration object. If you follow the same pattern in your application, make sure to set the store's type property to "odata".
The DataSource configuration object allows you to sort, filter, group, and otherwise shape the store's data objects. This demo filters data and selects a limited number of fields.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<dx-data-grid id="gridContainer" [dataSource]="dataSource" [showBorders]="true">
<dxi-column dataField="Product_ID"></dxi-column>
<dxi-column dataField="Product_Name" [width]="250"></dxi-column>
<dxi-column
dataField="Product_Cost"
caption="Cost"
dataType="number"
format="currency"
></dxi-column>
<dxi-column
dataField="Product_Sale_Price"
caption="Sale Price"
dataType="number"
format="currency"
></dxi-column>
<dxi-column
dataField="Product_Retail_Price"
caption="Retail Price"
dataType="number"
format="currency"
></dxi-column>
<dxi-column
dataField="Product_Current_Inventory"
caption="Inventory"
></dxi-column>
</dx-data-grid>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import 'devextreme/data/odata/store';
import { DxDataGridModule } from 'devextreme-angular';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
styleUrls: ['app/app.component.css'],
selector: 'demo-app',
templateUrl: 'app/app.component.html',
})
export class AppComponent {
dataSource: any;
constructor() {
this.dataSource = {
store: {
type: 'odata',
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
key: 'Product_ID',
},
select: [
'Product_ID',
'Product_Name',
'Product_Cost',
'Product_Sale_Price',
'Product_Retail_Price',
'Product_Current_Inventory',
],
filter: ['Product_Current_Inventory', '>', 0],
};
}
}
@NgModule({
imports: [
BrowserModule,
DxDataGridModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
// In real applications, you should not transpile code in the browser.
// You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'@angular/core': 'npm:@angular/core@12.2.16',
'@angular/platform-browser': 'npm:@angular/platform-browser@12.2.16',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.16',
'@angular/forms': 'npm:@angular/forms@12.2.16',
'@angular/common': 'npm:@angular/common@12.2.16',
'@angular/compiler': 'npm:@angular/compiler@12.2.16',
'tslib': 'npm:tslib@2.3.1/tslib.js',
'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.2.3/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@22.2.3/bundles/dx.all.js',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.20/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.65',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.37',
'devextreme-angular': 'npm:devextreme-angular@22.2.3',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.7.1/standalone.js',
'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js',
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
'npm:@angular/*/package.json',
'npm:@angular/common@12.2.16/*/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devextreme-angular@22.2.3/*/package.json',
'npm:devextreme-angular@22.2.3/ui/*/package.json',
'npm:devextreme-angular@22.2.3/package.json',
'npm:devexpress-diagram@2.1.65/package.json',
'npm:devexpress-gantt@4.1.37/package.json',
],
};
System.config(window.config);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.3/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.12.0/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import("app").catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>