DevExtreme React - OData Service
Use the ODataStore to bind the Lookup to data provided by an OData service.
jQuery
JavaScript
$(function() { $("#lookupContainer").dxLookup({ dataSource: new DevExpress.data.ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }), valueExpr: "Product_Cost", displayExpr: "Product_Name" }); });
Angular
HTML
TypeScript
<dx-lookup [dataSource]="lookupDataSource" valueExpr="Product_Cost" displayExpr="Product_Name"> </dx-lookup>
import { DxLookupModule } from "devextreme-angular"; import ODataStore from "devextreme/data/odata/store"; // ... export class AppComponent { lookupDataSource = new ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }); } @NgModule({ imports: [ // ... DxLookupModule ], // ... })
Vue
<template> <DxLookup :data-source="products" value-expr="Product_Cost" display-expr="Product_Name" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxLookup } from 'devextreme-vue/lookup'; import ODataStore from "devextreme/data/odata/store"; export default { components: { DxLookup }, data() { return { products: new ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }) }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Lookup } from 'devextreme-react/lookup'; import ODataStore from "devextreme/data/odata/store"; class App extends React.Component { constructor(props) { super(props); this.products = new ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }); } render() { return ( <Lookup dataSource={this.products} valueExpr="Product_Cost" displayExpr="Product_Name" /> ); } } export default App;
Data kept in the ODataStore can be processed in a DataSource. For example, the DataSource can filter data.
jQuery
JavaScript
$(function() { $("#lookupContainer").dxLookup({ dataSource: new DevExpress.data.DataSource({ store: { type: "odata", url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }, filter: ["Product_Available", "=", true] }), valueExpr: "Product_Cost", displayExpr: "Product_Name" }); });
Angular
HTML
TypeScript
<dx-lookup [dataSource]="lookupDataSource" valueExpr="Product_Cost" displayExpr="Product_Name"> </dx-lookup>
import { DxLookupModule } from "devextreme-angular"; import DataSource from "devextreme/data/data_source"; import "devextreme/data/odata/store"; // ... export class AppComponent { lookupDataSource = new DataSource({ store: { type: "odata", url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }, filter: ["Product_Available", "=", true] }); } @NgModule({ imports: [ // ... DxLookupModule ], // ... })
Vue
<template> <DxLookup :data-source="products" value-expr="Product_Cost" display-expr="Product_Name" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxLookup } from 'devextreme-vue/lookup'; import DataSource from "devextreme/data/data_source"; export default { components: { DxLookup }, data() { return { products: new DataSource({ store: { type: "odata", url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }, filter: ["Product_Available", "=", true] }) }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Lookup } from 'devextreme-react/lookup'; import DataSource from "devextreme/data/data_source"; class App extends React.Component { constructor(props) { super(props); this.products = new DataSource({ store: { type: "odata", url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }, filter: ["Product_Available", "=", true] }); } render() { return ( <Lookup dataSource={this.products} valueExpr="Product_Cost" displayExpr="Product_Name" /> ); } } export default App;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.