DevExtreme Vue - 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