DevExtreme Vue - 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
TypeScript
HTML
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 ], // ... })
<dx-lookup [dataSource]="lookupDataSource" valueExpr="Product_Cost" displayExpr="Product_Name"> </dx-lookup>
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
TypeScript
HTML
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 ], // ... })
<dx-lookup [dataSource]="lookupDataSource" valueExpr="Product_Cost" displayExpr="Product_Name"> </dx-lookup>
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.