DevExtreme React - OData Service
Use the ODataStore to bind SelectBox to data an OData service provides.
jQuery
JavaScript
$(function() { $("#selectBoxContainer").dxSelectBox({ 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 ODataStore from "devextreme/data/odata/store"; import { DxSelectBoxModule } from "devextreme-angular"; // ... export class AppComponent { productStore = new ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }); } @NgModule({ imports: [ // ... DxSelectBoxModule ], // ... })
<dx-select-box [dataSource]="productStore" valueExpr="Product_Cost" displayExpr="Product_Name"> </dx-select-box>
Data kept in the ODataStore can be processed in a DataSource. For example, the DataSource can filter data.
jQuery
JavaScript
$(function() { $("#selectBoxContainer").dxSelectBox({ 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 "devextreme/data/odata/store"; import DataSource from "devextreme/data/data_source"; import { DxSelectBoxModule } from "devextreme-angular"; // ... export class AppComponent { productStore = new DataSource({ store: { type: "odata", url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }, filter: ["Product_Available", "=", true] }); } @NgModule({ imports: [ // ... DxSelectBoxModule ], // ... })
<dx-select-box [dataSource]="productStore" valueExpr="Product_Cost" displayExpr="Product_Name"> </dx-select-box>
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.