A newer version of this page is available. Switch to the current version.

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