DevExtreme jQuery - 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
Feedback