React List - 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
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.