DevExtreme jQuery - OData Service
To bind the List to data provided by an OData service, use the ODataStore.
jQuery
JavaScript
CSS
$(function() {
$("#listContainer").dxList({
dataSource: new DevExpress.data.ODataStore({
url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
key: "Product_ID"
}),
itemTemplate: function(data, _, element) {
element.append(
$("<img />").attr("src", "data:image/jpg;base64," + data.Product_Primary_Image)
.height(30).width(30)
.addClass("item-image"),
$("<p>").text(data.Product_Name)
.addClass("item-text")
)
}
});
});.item-image {
vertical-align: middle;
}
.item-text {
display: inline-block;
vertical-align: middle;
margin: 0px 0px 0px 10px;
}Angular
TypeScript
HTML
CSS
import { DxListModule } from "devextreme-angular";
import ODataStore from "devextreme/data/odata/store";
// ...
export class AppComponent {
listDataSource = new ODataStore({
url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
key: "Product_ID"
});
}
@NgModule({
imports: [
// ...
DxListModule
],
// ...
})
<dx-list
[dataSource]="listDataSource">
<div *dxTemplate="let data of 'item'">
<img class="item-image" src="data:image/jpg;base64,{{data.Product_Primary_Image}}" style="height:30px; width:30px">
<p class="item-text">{{data.Product_Name}}</p>
</div>
</dx-list>
.item-image {
vertical-align: middle;
}
.item-text {
display: inline-block;
vertical-align: middle;
margin: 0px 0px 0px 10px;
}Data kept in the ODataStore can be processed in the DataSource. For example, the DataSource can group or filter data.
jQuery
JavaScript
$(function() {
$("#listContainer").dxList({
dataSource: new DevExpress.data.DataSource({
store: {
type: "odata",
url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
key: "Product_ID"
},
group: "Product_Category",
filter: ["Product_Available", "=", true]
}),
grouped: true,
itemTemplate: function(data, _, element) {
// The template is omitted for brevity
// See the previous code example
}
});
});Angular
TypeScript
HTML
import { DxListModule } from "devextreme-angular";
import "devextreme/data/odata/store";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
productDataSource = new DataSource({
store: {
type: "odata",
url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
key: "Product_ID"
},
group: "Product_Category",
filter: ["Product_Available", "=", true]
});
}
@NgModule({
imports: [
// ...
DxListModule
],
// ...
})
<dx-list
[dataSource]="productDataSource"
[grouped]="true" >
<div *dxTemplate="let data of 'item'">
<!-- The template is omitted for brevity -->
<!-- See the previous code example -->
</div>
</dx-list>See Also
Feedback